Its the basic Django image file upload process form. The image model is using the ImageField class. I have a custom display button over the default upload button that normally displays the name of the image to the side of it. I need to be able to grab that name of the file so that I can display it to the user.
I've tried to check the input field with a jQuery selector, but nothing about it changes when a file has been selected. I searched the page of html for the file name and nothing returned.
Of course, this needs to be done before the image has been submitted but after it has been selected. Any help is greatly appreciated.
Thank you.
ImageField inherits from FileField methods and attributes. Take a look in a similar question for FileField:
FileField Size and Name in Template
Related
I have a form where users can upload a file. The uploading and validation afterwards (filesize, filetype...) is done with php by submitting.
But I wonder how I could give the user a "visual feedback" that his file was "picked" immediately. So I don't need validation nor anything complex. I just want to either color the label green or rename the label of the upload field when the user has selected a file and clicked "Choose" in his browser.
How would I do that most easily?
On success assign one variable then use that variable to add class to the element.
I'm bulding a website that allows users to upload a picture and then get the EXIF info shown in a user-friendly way.
I also want to make available an option for users to be able to share their picture online.
At the moment I already have the JavaScript for the image preview fully working, I select an Image on a Form and it appears on the website...
I also have the upload part of the code working as well (PHP). The image gets uploaded to a folder and the name and path of the respective image get uploaded to the MySQL database.
The thing is... I want the process to happen in this way:
User selects the picture - WORKING
The picture appears on display as a preview - WORKING
User presses the upload button (if he wishes to) - WORKING
The image gets uploaded to the defined folder and the name and path to the DB - WORKING
Website stays on the same page with the image preview still there... - TO BE DONE
A new text-area appears on the website with the image path inside (gotten from the database) so the user can share the image - TO BE DONE
----------------//-------------------
I've read some articles and topics on this and supposedly it needs to be done using JQuery in order to work in the way I defined above...
Could you guys clarify if that's true?
---------------//---------------
UPDATE
The solution #Dhanushka sasanka presented worked! I can now upload the picture to the folder and the info to the database and it stays on the page without refreshing!!
I did this You must use JqueryForm Plugin to do this because In the Form that your "upload" button it must be type="submit" therefore current page will be reload after pressing that "upload" button so you must use this plugin JQuery Form Plugin
Go through this one.from this you can uplaod your image without reloading page.
Sending data to server in background without refresh/reload/change the current page can be done with javascript AJAX Request.
If you want to pass data to server and stay on the same page, Then Yes you need to use AJAX in Javascript.
But using Jquery is much easy to implement Ajax request and callbacks, So go with jQuery.
Actually, I am using advance custom field plugin and I have made a repeater with three fields language, release and download (file type).
So now I have made a custom template for every post and retrieved repeater fields on it so I want that when user will click on download button then it will redirect on another page with a custom URL with post name and language both.
I need post name and language into that link then on final page
I will give the download option. Below are pages link of the post
https://subtitlesrt.com/movie-imdb/fifty-shades-freed-2018-arabic-subtitles-download-srt-%D8%AA%D8%B1%D8%AC%D9%85%D8%A9-%D8%A7%D9%81%D9%84%D8%A7%D9%85/
I have also set download page on custom page.
Let me know the right solution for it.
If i were you i would follow these steps.
Create a new page with name of Custom download maybe
create a custom template for that page
in your posts when you show repeater values, use the values like a form with GET method (maybe input types can be hidden for aesthetic) and submit the form to this new page.
In this page you can get the repeater field values with form and do whatever you want.
NOTE: i suggested GET method because you said "... it will redirect on other page with a custom url .." GET method show values in url and you can index them.
I have one form_for for saving NewsItems (something like posts). Each news item should have one cover image, title, short text... The image should appear as a preview before the form is filled and there should be some loader that shows the progress of the image being uploaded. For the preview and the progress bar I use Jquery file uploader.
I tryed to use nested forms but jquery file uploader submits the whole form when the image is loaded and the text fields are stil empty. When I press submit it will submit the form but this time without the image.
I added an extra column in news item table with the name image. Also added hidden filed :image and validation that it must be present. Now when the jquery file upload is done it add's the image in the image tag and it add the base64 code of the image in the hidden field with name :image.
The problem looks like it's solved but in the terminal I see a big base64 code and it's looks like there is a better way to do it.
Please, do you know how to disable the automatic submiting with jquery file upload or how to have the upload progress and the preview image without the base64 code in the params?
Thank you in advance!
To prevent the base64 string filling up you logs, use the filter_parameters setting in your config/application.rb, ie:
# Configure sensitive parameters which will be filtered from the log file.
config.filter_parameters += [:password, :token, :encoded_image]
I have a query and don't know where to start - I have a image select input field on a form thats populated by an jquery ajax autocomplete. What I would like to do is the following:-
If a user wants to choose an alternative image that's not currently in the dB pop up a modal/lightbox form which contains the upload/editing form.
Once posted I want to pass this data back to the original form field and refresh the data for the autocomplete.
I already have the upload and editing forms working as standalone pages I just want to incorporate the output back into the original form.
Is it possible?
Can anyone suggest modal/lighbox script that can do this?
What data are you trying to retrieve in the parent window? Assuming your using an iframe in your lightbox? If you aren't then you should just be able to set variables and call functions from your upload script output as if it were the same page.
If you are...
I don't believe there are any lightbox/modal solutions that support this, I normally incorporate a script like below in my upload script so you can monitor the success/failure of the uploaded file and the data.
(function () {
parent.myClass.imageLocation = $output_your_image_location here;
return;
)();
You can obviously edit this to handle different situations but I always use the parent keyword as I have a similar way of handling uploads in some software I've built recently.