Code

Discussion on Images Select & Drag and Drop with Preview - JavaScript

Discussion on Images Select & Drag and Drop with Preview - JavaScript

By
Cart 16 sales

Dosana supports this item

Supported

This author's response time can be up to 5 business days.

3 comments found.

I’m planning to integrate this in a LAMP-environment. Thank you for providing the example/AJAX-Function “handleFileUpload”. My Question is: How do I display uploaded Images from Mysql-DB via PHP for Edit-Purposes (like deleting, rotating, Re-Arranging)? Can I make use of an existing function? If so, which and how?

What do you mean by “Rotation is applied only on images previews using CSS and it is not applied on the actual images.”? In back-end, can I get the filenames in order they are arranged in UI? If not, what can I do if the order of images is important to me?

Hello, thank you for reaching out. To answer your questions:

What do you mean by “Rotation is applied only on images previews using CSS and it is not applied on the actual images.”?

The statement “Rotation is applied only on images previews using CSS and it is not applied on the actual images” means that the script does not include the functionality to save the rotated images.

When you use the rotate button, the rotation is purely a visual preview applied to the image using CSS. However, the actual image file itself remains unchanged, and the rotation is not permanently applied to it.

To save the rotated images, you would need to implement your own logic in the backend where you can utilize the rotation degree information, which is saved in images array, and then apply the necessary rotation transformation to the actual image file before saving it. This way, you can ensure that the rotated images are permanently saved and stored as desired.

In back-end, can I get the filenames in order they are arranged in UI? If not, what can I do if the order of images is important to me?

In the provided script, all the important details of the images, like their order, rotation degree, name, size, type, and the image files themselves, are stored together in an array called “images.” This array makes it easy to access all the information about the images in one place.

By uploading this array to the backend, you can access and utilize the information according to your needs. This allows you to retrieve the filenames of the images and their corresponding order as displayed in the user interface (UI). This can be useful if you want to perform any operations or logic on the backend based on the specific order of the images as shown in the UI.

Please let me know if you have other questions.

Thanks for details. I think it has all I needed.

Thank you for your purchase.

All the best.

It can be save the images in a database (path url image – eg. images\toys\img01-.jpg? or what do I need to save the images in the database-Table Mysqli, also save images rotated from vertical to horizontal., thanks! It look great so far!

Oh no, I’m sorry about the questions that I requested before, you have everything well explained under tab Item details. Just the image rotation, how could I save it?

Hey, thank you for your purchase and feedback we appreciate it.

In case you’re still planning to use PHP to handle uploaded images on the server, I believe there’s a PHP function for rotating images that you can use. For more information about this function, here’s a link to the official PHP documentation https://www.php.net/manual/en/function.imagerotate.php

You could upload images files with their rotations degrees to server (each image file with its rotation degree, that you can get from images array) and use the rotation degree of each image to rotate it using the PHP imagerotate function and then save it directly in server or in database.

Just to give an example for how to upload images data using AJAX we updated source code and provided a simple example in handleFileUpload function. This code example loop through all the images and send separate upload request for each image data (Uploading images data one by one to server). The provided script is just an example and it is commented, to test it you have to uncomment it and can add your own upload URL. And of course, you can use your own logic for implementing the upload.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey