I work on a Saas project where users can submit/upload items.
I want to create a similar work-flow like Youtube.
This means that the user uploads image file, ZIP files etc. which then show in the upload progress block, during this time I want the user to be able to edit the other informations like tags, text description, price for item etc.
At Youtube a user can upload a video file and edit all other things during the upload, he can even leave the page and the upload continues in the background.
But in my project whenever a user uploads a file these fields can not be edited properly or get removed again after the upload is successful.
Please point me to a solution how this works/how Youtube et al approached this.
Thanks.
I think you should do this with javascript features
Like sending a file with ajax in laravel and php.
By doing this, you can still access the elements inside your web page.
Related
Im trying to upload multiple files by dropzone.js in my MVC Project. The files upload successfully but the problem: after upload files, the page reset and i cant see the results. I have almost searched all the related subjects in this site and the other examples. I see people want to learn how they can refresh page :) but i want to stop page after upload. The results preview disappear quickly. Thanks for any help.
After hours, i see its not about dropzone, its about mvc. Because of post data in mvc, if you save a file, modelstate change, then automatically redirect the previous action/view and the results disappear. So it seems like a page refresh. Anyway, its suggested to use PRG instead of POST. Or redirect another GET action after successfully upload.
I have form with this url
localhost:8080/MyApplication/newuser
, in this new user form page it will have a lot of stuff like First name, Last name, email, username etc. Also it will have image block with upload option. Now I have two questions that I cannot figure out the best way to handle it. First, after the user finish the upload the picture (by clicking the upload button), the picture will be displayed in new user form, and all the information that user entered before will be still there? Is it possible?
Second questions is since the form validation will check does username in database already or not, I want the behavior is when user press "Save" in the form with all the validation met, the picture will rename to "user-{$username}.jpg" for example, and save that picture into webapp/WEB-INF/static/images/ folder. I look at this tutorial:http://crunchify.com/spring-mvc-tutorial-how-to-upload-multiple-files-to-specific-location/, it specify the actual location of saving directory, but if I make my whole project into war format, and then run in another computer, I think it will give me the error said "cannot find the directory" etc. Therefore I am looking for the solution for this two questions.
Thank you for your help in advance.
Here is the project structure I have so far, and I am using java configuration
I have a registration form completed and would like to add a profile picture upload. Once the user clicks the browse, he can select the photo. Then he clicks ok/apply/ok and then the photo is reflected in the thumbnail area without page refreshing.
Once the user is happy with all fields input he can submit the form and with it the photo of course.
Anything that does this exists out there already? If not, please provide guidance on how to establish this feature.
Thanks,
I'm not aware of a ready made solution for this but there probably is something :-)
However, with Laravel this is beautifully simple. You've tagged your question ajax but I'll answer this assuming you're going to use an old fashioned server round trip (i.e a form submit).
1) In your template, add a file element to the form. http://laravel.com/docs/html#file-input
2) Add some javascript to the page that detects when a file is selected and shows the preview. Extensive tutorial here: http://www.html5rocks.com/en/tutorials/file/dndfiles/
3) In your controller, handle the file using the Input facade. http://laravel.com/docs/requests#files
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.
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.