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
Related
Hi Everyone, I have a pretty simple HTML Form Here. When I click submit I am able to have the text from the text boxes uploaded to firebase. However, I want to be able to upload an image and submit that to cloud storage but I haven't been able to figure this out?
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())
}
});
}
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.