Jump to content

Multiple File / Image API upload and API delete (only one, not deleteAll) example


huseyin
 Share

Recommended Posts

As a novice user i had my problems understanding how multiple file/image upload works and how to delete only one selected uploaded image and not to delete all.
It is very difficult for a novice user to understand the complicated examples and answers of the very experienced members. 
So i decided to make a very simple example for explaining the multiple file/image upload and selected delete. I am not an expert on Processwire, wanted only to share what i achieved so far. So there may be better ways to do the same. (Take this as an axample form a novice for other novices)

WARNING : As this is only a very simple example; there are no validations and security checks in this example. So please dont use this on a real project without security checks etc.

The attached fileexample.php is complete working example. (I made some last minute comment additions, hope i did not destroyed anything. If you have problems using the example file please inform me, i will check and correct)

With this example you will be able to;
- upload multiple images
- delete only selected images you uploaded before.
Especially for the second part (deleting only one image from a multiple image field) it is very hard to find examples and answers in the forum

HOW TO USE THE EXAMPLE FİLE:

1- Create a TEMP directory for for fileupload below site/assets/
2- Download the attached "fileexample.php file and edit line 24, write the path of the created fileupload temp directory.
3- Upload the "fileexample.php file to site/templates/ folder
4- Create an new field named "images" with type of images.
5- Add a new template. Choose "fileexample" from the recommended list.
6- Edit the "fileexample" template and add the created "images" field from step 4 to it.
7- Create a new Page and select "fileexample" as the template of this page.

Now visit the newly created page and you will see 5 image input fields.
It is possible to use only one inputfield, but it is more visual the way i choose in the example.

The flow of the example is like this;

When you visit the page the form is created.
If there are already uploaded images the thumbnails are shown and a "Delete" button next to it.
If there is no image than a image input is shown. 
As we used "$imageamount = '5';" if there are 2 images already uploaded you will see 2 thumbnail iamges with delete buttons netx to them and 3 image inputfields.

If you choose some images on the image input fileds and hit the "Save" button than the code part starting with
"if ($input->post->fileprocess){"
is triggered.
This part makes the file upload process.

If you click the Delete button next to one thumbnail the script "deleteimage" is trigered. 
This script makes a ajax Post call the same page with the post variable "imagedelete". 
This ajax call sets "imagedelete" variable and so the code satrting with line 
"if ($input->post->imagedelete) {"
Will be trigered.
Here the most important part is the exit in the last line. As this is a Ajax call the call have to be terminated before anything is outputted.

-----------------------------

Hope all is clear understandable. My English not so good, sorry.
If you do not understand any part please ask and will do my best to explain it again.

fileexample.php

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...