I have such interactive button I place at the bottom of backend-generated message:
The button click calls the dialog:
If I enter the public URL of an image in the 'URL' field it is successfully sent to the backend and I'm able to update the backend-generated message with an image. But instead of uploading file somewhere and copying it there I'd like to click 'upload image' in the dialog and select file from a disk. Is this possible?
No. Uploading files is currently not supported by Slack Dialogs.
But you could implement it yourself with an upload script that runs in the browser and is called by a link button from Slack. This would work similar to this example for a file download.
The link button is a variation of an message button and has to be placed in a message (e.g. next to your Add note button), but can not be placed inside the Dialog.
Here is the basic outline:
User clicks on "Add image" button in message
Browse opens and runs upload script
The upload script requests the user to specify which file to upload
Script uploads the file (e.g. to your server or Slack) and links it to
the user's request
Things to consider:
You have to link the current session with your script, e.g. by transferring an ID in the link (which might infer security concerns)
This upload function will not be modal like you dialog, so your app needs to be able to handle an asynchronous / parallel upload of files
Check out these pages for more details on uploading files via browser:
What is the best way to upload files in a modern browser
Using files from web applications
Related
Below image depicts a screen in my sample application which has
file upload functionality.
Below are the steps I followed to upload and save files in Database.
In this screen once user clicks "Browse" button and selects the file(s) that need to uploaded, an AJAX request will be made to server(MVC application) for each file selected.
For each upload AJAX request, server will save the file data(byte array) in session array variable and sends JSON response(which has file name and file size) to Browser.
Browser will display JSON response.
Once user clicks the "Submit" button , the file information which is already there in session variable will be stored in Database.
Following above approach I could implement the desired upload functionality.
Question: I would like to know whether this approach is correct, am I making
any mistake?
I'm developing a simple websit, where user can upload and edit their profile
picture. I have implemented it. That is user can browse and upload his new
photo as profile picture. Now at this stage i want to add one more facility.
Whenever the user browses a photo, the new photo should be shown (he then
can upload it if wishes). For example I have the following UI :
So whenever the user browses a new photo say for example mango.png, the
new picture(picture of a mango ) should be shown instead of that blank picture.
I do not have any idea how to do that. I seached it in internet but the only think
i am getting is how to upload any image. So how can do that. Anyone ???
You can use JavaScript to send the image file automatically when the user selects an image in the CommonDialog file browser. For an example code have a look at this question:
How do I auto-submit an upload form when a file is selected?
If you want the users to be able to check the image before they decide to make it their profile picture: Let the form upload the file (temporarily) but don't set it as a new profile picture immediately. Finally, if the user sends another form ("Yes, apply new profile picture!"), your script could take the previously uploaded temporary image file and perform the database operations needed to make it the new profile picture.
Once a user has uploaded a file via any means (file selection, DnD or Cut and Paste), I would like to disable the Upload widget, to prevent users to upload again.
This disabling should be done for a specific upload widget since I may have many on the same page.
Is there a method I can call to do this?
Thanks.
Simply present an alert/message to the user in your UI once they are no longer able to upload additional files (which you should do no matter what) and then return false in your onValidateBatch handler for all subsequently dropped/selected files. This will prevent files submitted via the file chooser, file submitted via DnD, AND pasted images from being uploaded.
I'm planning to use FineUploader.js to give my users the ability to drag 'n drop images, select multiple at once, etc... and, maybe more importantly, have the image uploading while they complete the rest of a form.
I'll be using the ASP.NET MVC/.NET 4.5/C# platform for this project.
What if the user don't complete the form? If they actually hit a cancel button I could probably fire a command to delete the images that have already uploaded. What about if they simply close the browser?
How to prevent files from being uploaded, but not used?
I have a problem with images in my web app. let say I have a form where there are some text fields, dropdowns, upload ajax control for multiple image upload and button Save.
I know how to upload images and posting a form and saving everything to database but the problem is that I want to achieve the following user experience:
User can upload multiple images and browser after successful upload shows thumbnail (this I know how to do it)...the problem here is that I do not want to save images to db before button save is pressed. Is there any convinient how to save temporary images...I have tried temp table which after button is pressed, copies all images to image table but here is browser refresh problem that looses all the data and images stay in a temp table. Can you use a session for storing temporary images or any other way (I think session is not particulary good idea for such things.)
One easy way to achieve that is to use the HTML5 File API and display a thumbnail once the user selects a file to upload. You don't even need to waste bandwidth as everything happens on the client. Once the user submits the form, then the image will be uploaded to the server.
Another possibility is to use one of the gazillions of available AJAX upload controls such as Uploadify, Valums Ajax Upload, Uploadify, the jQuery form plugin, ... which will allow you to upload the file to the server using an AJAX request so that you can resize it there and return the resized image to the client that you could display the thumbnail on the client.