Drag & Drop images


#1

Is it possible to allow an image container to allow drag & drop of an image into it.

Once completing I can then upload the image to a server ?

Any pointers please ?

Cheers

Steve Warby


#2

Yes, this is possible. We do not have a sample of this.

I did find a JavaScript library - there may be others:

http://www.dropzonejs.com/


#3

Thanks for the info.

How do I set a container to have attribute ‘action’ ?

Following the docs I have tried
Where drop1 is a container with class dropzone

// Dropzone.autoDiscover = false;
$('#drop1').attr('action', 'http://www.toolfolks.com/techy/dropZone.php');
$("div#drop1").dropzone({ url: "http://www.toolfolks.com/techy/dropZone.php" });

With the above when I drag an image I get :

TypeError: files.map is not a function. (In 'files.map(function (file) {
return _this5.addFile(file);
})', 'files.map' is undefined).
line 1655 column 23 

I have also tried different configurations.

I think I need to do the equivalent of this in NSBasic

 <form action="upload.php" class="dropzone"></form>

but for a container

I presume this would do the trick $(’#drop1’).attr(‘action’, ‘http://www.xxxx.com/xxxxx.php’);

Cheers

Steve Warby


#4

I am only getting the above error if I drag an image from finder ( I am on a Mac) If I drag an image from a browser I get no errors but no action.

Cheers

Steve Warby


#5

The Container control has a ‘attributes’ property. Simply put it there.


#6

For anyone else. I got it working as follows:

Client side.
Add the files dropdown.js & dropdown.css
Copy these into the project folder then drag from that folder into the project.

Add a container and set the class to dropzone.
Set the attributes to:
action = ‘dropZone.php’ // the name of your php file:

On the server
creat a folder 'uploads’
create a PHP file as follows:

    <?php
    $ds = DIRECTORY_SEPARATOR;  //1
 
    $storeFolder = 'uploads';  //2
 
    if (!empty($_FILES)) {
    $tempFile = $_FILES['file']['tmp_name'];          //3             
    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4
    $targetFile =  $targetPath. $_FILES['file']['name'];  //5
    move_uploaded_file($tempFile,$targetFile); //6
    }
		//echo('working');
     ?>     

This is fine on Mac Chrome & Firefox but on Safari I get the following error:

TypeError: files.map is not a function. (In 'files.map(function (file) {
return _this5.addFile(file);
})', 'files.map' is undefined).
line 1655 column 23

I have emailed the developer so I’ll keep you posted.

Cheers

Steve Warby


#7

I search ‘tinter web’ and food the GitHub page with a fix here

Seems okay now.