My website allows a user to upload images. I'm stuck between two situations: whether I should upload the image immediately after it's selected, or upload the image after clicking the submit button.
I decided that uploading the image immediately makes a little more sense for my website, however, I ran into another issue.
As it stands, I want to have each image's name being the id of the post (for example: 500.png). However, if I upload the image before the user clicks submit, how would I name the image in this way (since I can't get the insert id when the user presses submit)?
Each time you upload an image, store the image in a separate table, with one column of the time at which the image is uploaded; and another column to indicate whether the image is attached to a post. You may use postid for this column.
When an image is auto uploaded, you can populate a hidden input field to store the auto ID of the image, and forward it to the post creation handler. The newly created post will have an ID. Save this in the postid column in the image. Now your image filename is using the imageid, not postid, but it's okay. If you really want to change the image name after the post name, upload the original image as img_###.png; then rename it to *.png, where ### is the image ID, and * is the post id. The img_ prefix is necessary to avoid name conflict. Again, this is not necessary. Image ID is just fine.
Finally you can set up a cron job to delete the image files and records that are uploaded a while ago but without a post ID. This will purge all the auto uploaded images without a submitted form.
You do have to take care of image upload racing condition. What if your image is still being uploaded, and someone clicks on the form post button already?
Related
I want to ask,
so I have a form whose contents one of which is to upload multiple files, then after I browse the file, then the file will appear (preview),
then the user will have access to choose the file to upload when it is not wanted then there is a delete button for wrong one file.
then after all okay, then the form will be uploaded.
then after that the user will be able to edit the file again through another page without deleting the old file.
this is what I want,
user fills in the input form
when in the input file field, the user can select several files
Then after clicking OK, the selected file will be displayed
The user can delete one of the unwanted files
after all okay the user submit the form to db
like the display on wetransfer
can anyone teach me?
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.
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 am creating a user flow that allows users to edit an svg and save continuously via javascript. However, I don't like saving the image file over and over again. Is there a way to do a partial upload? I know you can do a GET with the image, color, and coordinates. Is there a way to similarly do POST? I.e. only send the server the change that occurred to update the image file with?
I'm working on creating a real estate website where it would allow agents to add their property. For adding the property I created a form. For uploading the picture within the same form, I'm using a jquery plugin which uploads the picture before the form is submitted. I have created a hidden field in the form and with php I am filling that field with a unique id to identify the picture belonging to the property.
What if the user did not submit the main form (keep in mind user can close browser, tab, or even navigate away from page) and I already uploaded the pictures. How can I detect these pictures?
Thanks in advance.
You can use onbeforeunload event to detect if the user is leaving the page and then make an ajax call to delete the images.