Background
I have a jQuery File Upload widget that is part of a HTML form. The HTML form has a hidden input field that is populated with JSON by the jQuery File Upload widget upon a successful upload. This way, on the server side, I know which uploads to link to the rest of the form information.
When the form is submitted some server side validation takes place. Upon invalid input the page is reloaded and an error message is shown. All the form fields, including the hidden form field with the names and the paths of the uploaded files are still populated.
Problem
My problem now is that after reloading the page, the table with uploaded files is empty. This makes the user believe that the uploads are gone, while in fact, the form still has a reference to the uploaded files in a hidden form field.
Question
Is there a way I can get the jQuery File Upload widget to rebuild the file list upon page load so that users see the files they have uploaded before?
In the meanwhile, I've found the answer to my problem:
I had to manually trigger the done event.
if ($('#hidden-form-field-id').val() != "") {
$('#fileupload').fileupload('option', 'done')
.call($('#fileupload'), $.Event('done'), {
result: {
files: JSON.parse($('#hidden-form-field-id').val())
}
});
}
Related
I have a form where upload images and this works well. But I need a solution on how to select an already uploaded image on the server and write the name of the image to database if submit the form
I am trying to use DropzoneJs.
I have a form with some text fields and a dropzone for file attachments. I did it so that after a file is successfully uploaded to the server (after being automatically processed by dropzone), I'll just add hidden input fields with the filenames as value along with all the other textfield data in the form (for database). However if I have dropped files in the dropzone and has been successfully been uploaded to the server, and for some reason the form won't be submitted (eg. page refreshed or tab closed), then there won't be a need to save the filenames into the database. How do I remove the files in the server just before a page refresh or tab closing?
1) A good idea to do these kind of things ( at least how I do it ), is that you save all the images immediately ( with filenames ), and when the user closes the page and gets back to it in a while, they all show up again. So something like this:
Let's say you have a table users and a table images. When he uploads images to the server, they will be saved in the server and in the table images even without submitting the form. When the user closes the page, and gets back to it, he will have all the uploaded images again.
2) If you don't want this kind of thing, in the images table you can add a column with the name "draft" or something like that, so when the user uploads pictures, all the images are drafts, and when he submits the form, then they all become un-drafted. So with this, when users close the window, images are still drafted and nobody won't see them.
With this, you can then run a "cronjob" that deletes all the draft images from the server, or you can do that on the user's next login.
I have done proper research of many image plugins which upload images to server using php scripts.I just want to know a proper way to upload images to a django-based server.
Here's I think what a approach should be -
On clicking a toolbar button,a dialog will be opened.UI elements of the dialog will include a form with a file type,two fields for height and width and a button (upload to server).On adding a image file and fields and clicking upload button,ajax call will be sent (am i right here? or form submit should handle it.) to the server where a particular view will handle saving image to a specified folder.
On success server will return the full path of the image and dialog will insert in the editor.
Sorry if my question is very naive but I just wanted to know if my assumptions are right before starting off.
Thanks
There is a Django package
https://github.com/django-ckeditor/django-ckeditor
This comes with a demo app. I would advise to look into that, and see how it works.
Basically you will have to configure the media url and there is a setting for ckeditor where to upload the media. Ckeditor will handle the image upload for you.
Uploaded content will be show in an overview page, where you will have the option "use image in text"
I have this implemented to so it should upload one file at a time. So the user selects a file, clicks upload and then moves on to the next file.
But what the system seems to do is to store the previously selected files and so when the user hits the upload button it sends multiple requests.
I've made sure there is no "multiple" in the html file input box and changed name="files[]" to name="files".
singleFileUploads is set to true
is there a way to reset the file "array" so only one file is stored at a time?
Thanks in advance
I was also going through the same problem hope the link below helps you in this
Delete files programatically with jquery fileupload basic
How to show image thumb from input type file without upload, or with
I need to create file preview, when user select file in input type=file, i found, that ajax don't support file upload, so - maybe it is possible to show thumbs _without_actual_upload_ in js? Jquery/simple js
There's no current, cross-browser compatible method of getting the data from a file input.
You could use a hidden iframe as the target for upload, when the user selects a file, submit the form to the iframe window. You could use the jQuery Form Plugin (since you tagged jQuery), which will create the hidden iframe for you if the form contains a file input.
Some browsers implement File API, so you could use it for displaying the images. Using the File API together with some new features of the XMLHttpRequest objects, it's possible to upload files using ajax.
Other possibility is to upload the file with hidden iframe.