DragNDropz - Integrate Drag and Drop File Uploading

Go Pro

Pro Login

Use DragNDropz for your Projects

DragNDropz can integrate with any web application, page, or platform for free. You can embed and use our drag and drop service making it easy for your users to upload files, images, photos, and more. Capture the results of file and photo uploads, receive information about the files uploaded (including direct image and file links), and use the returned data as desired (even store them in your own database). Each unique user can upload up to 5 images and up to 5 files per day for free.

Pro users can embed DragNDropz widgets and specify their own usage limits for anonymous users. Thus, your application can be truly dynamic in that any user can upload a certain number of photos and files that apply to your account (within your space limit). The free user DragNDropz limit will not apply to images and files uploaded from your embedded instance of DragNDropz Pro. Other DragNDropz Pro users can also login to their account via the embedded iframe and upload as many files and photos as they want, so be sure to validate and apply your true application limits in your application's logic as well.

DragNDropz integration is powerful, quick, and easy. And best of all, you don't have to worry about handling file or image uploads. Let our service do the work for you.

Our service cannot be used to store infringing files or images. Images and files a user uploads must adhere to copyright law and should only be shared lawfully. Files and photos are subject to deletion at any time with NO warning.

Integrating DragNDropz File and Image Uploads

jQuery Required

First, make sure jQuery (a required DragNDropz prerequisite) has been loaded on your web page. If it has not been initialized, find the following section in your HTML code:

<!DOCTYPE HTML>
	<html>
		<head>
			<title>Test Page (Example)</title>

Include the jQuery library script below the <title> section:

<!DOCTYPE HTML>
	<html>
		<head>
			<title>Test Page (Example)
			<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Loading the DragNDropz Scripts

Under the jQuery declaration (still in the <head> section), include the DragNDropz iframe scripts. There are two separate scripts that can be used simultaneously depending on your requirements. If you plan to only offer image uploads that integrate with DragNDropz, include only the dragndropz_image_iframe.js script. If you plan to only offer file uploads that integrate with DragNDropz, include only the dragndropz_file_iframe.js script. To use DragNDropz for both image and file uploads, include both like so:

<!DOCTYPE HTML>
	<html>
		<head>
			<title>Test Page (Example)</title>
			<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
			<script src="https://dragndropz.com/scripts/dragndropz_image_iframe.js"></script>
			<script src="https://dragndropz.com/scripts/dragndropz_file_iframe.js"></script>

The DragNDropz library and its dependencies are now included on your page.

Initializing DragNDropz Instances

Typically, only one instance of the DragNDropz upload and only one instance of the DragNDropz file upload widgets should be initialized at one time. To initialize a DragNDropz image and file upload widget, add div placeholders on the page with a unique CSS class like so:

<body>
		<div class="dndImage"></div>
		<div class="dndFile"></div>
	</body>

Insert JavaScript file or script sections that will convert the divs you just created into fully functional DragNDropz upload controls when the DOM is ready:

<!DOCTYPE HTML>
	<html>
		<head>
			<title>Test Page (Example)</title>
			<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
			<script src="https://dragndropz.com/scripts/dragndropz_image_iframe.js"></script>
			<script src="https://dragndropz.com/scripts/dragndropz_file_iframe.js"></script>
			<script type="text/javascript">
				$(document).ready(function() {
					$("div.dndImage").initDragNDropz({
						width: "500",
						height: "600",
						backgroundColor: "#0100b0",
						backgroundImage: "none",
						theme: "dark"
					});
					$("div.dndFile").initFileDragNDropz({
						width: "500",
						height: "600",
						backgroundColor: "#0100b0",
						backgroundImage: "none",
						theme: "dark"
					});
				});
			</script>

You can customize the appearance of either widget by changing the initialization properties:

	All Widgets (Files and Images - All Users):
		width: (numerical pixel or percentage string value)
		height: (numerical pixel or percentage string value)
		backgroundColor: (hex or name of color string value)
		backgroundImage: (absolute image URL to use as the widget background or none to default to using the background color specified),
		theme: ("dark" or "light" - dark will make the widget text white while light will make the widget text black)
		glow: (boolean true or false - if true, a glow will be placed around the widget text making it easier to read the text if a busy background image is used)
		maxFiles: (integer value of the maximum number of images or files that can be uploaded at one time - the default is -1 which is unlimited)
	
	Image Uploads Widget (PRO DragNDropz Users Only)
		embedKey: (string key value that you can obtain from the gallery share wizard or when editing a gallery - must be paired with the correct gallery ID)
		galleryId: (integer of gallery ID [you can obtain from the gallery share wizard or when editing a gallery] you want to allow user uploads to - must be paired with the correct embed key)
		
	File Uploads Widget (PRO DragNDropz Users Only)
		embedKey: (string key value that you can obtain from the folder share wizard or when editing a folder - must be paired with the correct folder ID)
		folderId: (integer of folder ID [you can obtain from the folder share wizard or when editing a folder] you want to allow user uploads to - must be paired with the correct embed key)

Retrieving Data from DragNDropz

As files and images are uploaded, the DragNDropz widget will store the results on your page in an input html element that will be posted as an array (in case you initialize multiple separate instances of DragNDropz in the same form). If DragNDropz widgets have been initialized within a <form> tag, when the form is submitted, the below variables will contain an array of stringified JSON results which you can loop through to retrieve direct image and file URLs:

		dragNDropzUploadsJSON
		dragNDropzFileUploadsJSON

Here is a php snippet showing you how to process these results:

		<?php
		
			// Access the posted info
		    $uploadedImages = $_POST["dragNDropzUploadsJSON"]; // This is an array of input values since there could be many instances on one form
			$uploadedFiles = $_POST["dragNDropzFileUploadsJSON"]; // This is an array of input values since there could be many instances on one form
			
			// Loop through image inputs and print out what we received
			$count = 0;
			foreach($uploadedImages as $instanceImages){
				$jsonObject = json_decode($instanceImages, true);
				echo "Images for Input " . ($count + 1) . ":";
				echo '' . print_r($jsonObject, true) . '';
				$count++;
			}
			
			// Loop through file inputs and print out what we received
			$count = 0;
			foreach($uploadedFiles as $instanceFiles){
				$jsonObjectFiles = json_decode($instanceFiles, true);
				echo "Files for Input " . ($count + 1) . ":";
				echo '' . print_r($jsonObjectFiles, true) . '';
				$count++;
			}
		    
		?>

If the DragNDropz JSON string is part of an AJAX XHR request object, it's a little trickier, and you must use the stripslashes function before the value will successfully parse to JSON:

		<?php
			// Get any posted XHR data
			$postdata = file_get_contents("php://input");
			$request = json_decode($postdata, true);
			
			// Access the posted info
			$uploadedImages = stripslashes($request["dragNDropzUploadsJSON"]);
			$uploadedFiles = stripslashes($request["dragNDropzFileUploadsJSON"]);
			
			// Below lines convert the strings into arrays
			// containing associative arrays with information 
			// about each uploaded image
			$jsonObject = json_decode($uploadedImages, true); 
			$jsonObjectFiles = json_decode($uploadedFiles, true);
			
			// Print the results out
			echo "<p>Images:</p>";
			print_r($jsonObject);
			echo "<p>Files:</p>";
			print_r($jsonObjectFiles);
		?>

Each array index will contain an associative array containing these properties for image uploads:


			Image Info for All Users (Free and DragNDropz Pro) 
				image_id = the DragNDropz image ID
				image_path = the DragNDropz direct image URL
				image_thumb_path = the DragNDropz direct thumbnail image URL
				image_delete_key = a unique key that can be used to delete the image from DragNDropz later when used against the API endpoint of https://dragndropz.com/api/public_api.php?action=deleteImageByKey&image_id={image_id}&deletekey={image_delete_key}
				        - The image_delete_key value may also be set to "notOwner_cached_copy". This happens when the same image has already been uploaded by another free user.  In this case, a cached copy is used, and this key can't be used to delete the image.  The original free user who uploaded this image can no longer delete it using his original delete key either.  This image is now considered multi-owned and will be reused indefinitely.  This scenario is not likely to happen, but it helps us save disk space to prevent users from uploading the same files over and over.
			
			Image Info for Pro Users Also Includes:
				image_path_watermark = the DragNDropz direct watermark protected image URL
				image_thumb_path_watermark = the DragNDropz direct watermark thumbnail image URL

Each array index will contain an associative array containing these properties for file uploads:

			File Info for All Users (Free and DragNDropz Pro) 
				file_path = the DragNDropz file download and sharing URL
				file_name = the name of the file uploaded (without the full URL)
				file_ext = the extension of the uploaded file
				file_key = the key used to protect files from unauthorized use
				file_id = the DragNDropz file ID
				file_delete_key = a unique key that can be used to delete the file from DragNDropz later when used against the API endpoint of https://dragndropz.com/api/public_api.php?action=deleteFileByKey&file_id={file_id}&deletekey={file_delete_key}
	                    - The file_delete_key value may also be set to "notOwner_cached_copy". This happens when the same file has already been uploaded by another free user.  In this case, a cached copy is used, and this key can't be used to delete the file.  The original free user who uploaded this file can no longer delete it using his original delete key either.  This file is now considered multi-owned and will be reused indefinitely.  This scenario is not likely to happen, but it helps us save disk space to prevent users from uploading the same files over and over.

You can also access the value using jQuery (without posting a form):

		<script type="text/javascript">
			var uploadedImages = null;
			var uploadedFiles = null;
			var imageJSONString = "";
			var fileJSONString = "";
			
			// Get the uploaded image JSON string data
			if($(".dragNDropzUploadsJSON").length){
				var hiddenInput = $(".dragNDropzUploadsJSON");
				imageJSONString=hiddenInput.val();
			}
			
			// Get the uploaded file JSON string data
			if($(".dragNDropzFileUploadsJSON").length){
				var hiddenInput = $(".dragNDropzFileUploadsJSON");
				fileJSONString=hiddenInput.val();
			}

			// Convert the strings to actual JSON objects
			if(imageJSONString != ""){
				uploadedImages = JSON.parse(imageJSONString);
			}
			
			if(fileJSONString != ""){
				uploadedFiles = JSON.parse(imageJSONString);
			}
			
			// Loop through the images and get just the direct link URLs... array keys are listed above 
			$.each(uploadedImages, function(i, item) {
				var directLink = item.image_path;
				alert(directLink);
			}
			
			// Loop through the files and get just the direct link URLs... array keys are listed above 
			$.each(uploadedFiles, function(i, item) {
				var directLink = item.file_path;
				alert(directLink);
			}
		</script>

Events

When an image is uploaded to DragNDropz and data is sent back to your application, the hidden input fields DragNDropz generated change in value. You can bind a JavaScript function to this event. By doing so, you can capture when or if you receive data back from DragNDropz and run code as soon as the data has been received. You can bind a change event to the input DragNDropz generated by doing the following:

		<script type="text/javascript">
			// For uploaded images
			$(document.body).on('change', 'input.dragNDropzUploadsJSON', function(e){
				// Run a function when data is received
				var currentlyUploadedImages = JSON.parse($(this).val());
				runMyCoolFunction(currentlyUploadedImages);
			});
			
			// For uploaded images events
			$(document.body).on('change', 'input.dragNDropzEventsJSON', function(e){
				// Run a function when data is received
				var events = JSON.parse($(this).val());
				
				// Possible properties to check for that get generated by various events
				// 'complete' (all files uploaded), 'error', 'single_file_uploaded' (single file completed upload), and 'file_added' (file was added to instance and is now uploading)
				if(events.hasOwnProperty('complete') && events.complete == 1){
					// Clear the variable to capture the next queue complete event
					dragNDropzEventInformation = {};
					alert("Done with current image queue!");
				}
			});
			
			// For uploaded files
			$(document.body).on('change', 'input.dragNDropzFileUploadsJSON', function(e){
				// Run a function when data is received
				var currentlyUploadedFiles = JSON.parse($(this).val());
				runMyCoolFunctionFiles(currentlyUploadedFiles);
			});
			
			// For uploaded files events
			$(document.body).on('change', 'input.dragNDropzFilesEventsJSON', function(e){
				// Run a function when data is received
				var events = JSON.parse($(this).val());
				
				// Possible properties to check for that get generated by various events
				// 'complete' (all files uploaded), 'error', 'single_file_uploaded' (single file completed upload), and 'file_added' (file was added to instance and is now uploading)
				if(events.hasOwnProperty('complete') && events.complete == 1){
					// Clear the variable to capture the next queue complete event
					dragNDropzFilesEventInformation = {};
					alert("Done with current image queue!");
				}
			});
			
			// For a specific instance in a particular div
			$("form.myCoolForm").on('change', '.coolformWrapper input.dragNDropzFileUploadsJSON', function(e){
				// Run a function when data is received
				var currentlyUploadedFiles = JSON.parse($(this).val());
				runMyCoolFunctionFiles(currentlyUploadedFiles);
			});
		</script>

IMPORTANT: Every time an image or file is uploaded to DragNDropz, the change function will fire and append information about the new file to all of the previously uploaded files. Thus, when the change function is fired, you will receive ALL data regarding ALL of the files that have been successfully uploaded to DragNDropz. If you attempt to process each file or image result more than once when the change function fires multiple times, you could end up with duplicates and unexpected behavior. If you only want to process the information about the newest file or image that was uploaded to DragNDropz, you can grab it like this:

		var currentlyUploadedFiles = JSON.parse($(this).val());
		var latestUploadedFile = currentlyUploadedFiles[currentlyUploadedFiles.length - 1];

Handling Image & File Deletions in Your App

It is recommended that you capture and store the file_delete_key, image_delete_key, and DragNDropz ID values in your application database. When an image or file is no longer needed in your app, your app can make an API call using cURL, wget, or via other means to also delete the record properly from DragNDropz. This is not done automatically. Your app is responsible for cleaning up your own DragNDropz embedded gallery / folder, or these extra files will take up additional space which will count towards your storage usage limits. If a free user uploads the same image or file over and over again, a cached copy of the originally uploaded image or file will be used to save space and resources. In this case, the "image_delete_key" or "file_delete_key" property will be set to "notOwner_cached_copy". Cached images and files cannot be deleted by free users, and no pro user images or files ever become shared or cached. In the rare event multiple free users upload the same images or files, our single copy of this image or file cannot be deleted by any free user.

Deletion Endpoints:

Images: https://dragndropz.com/api/public_api.php?action=deleteImageByKey&image_id={image_id}&deletekey={image_delete_key}
Files: https://dragndropz.com/api/public_api.php?action=deleteFileByKey&file_id={file_id}&deletekey={file_delete_key}

Pro Users

If you have a DragNDropz Pro user account, you can embed DragNDropz upload widgets in any app and specify your own user upload limits by tying your instance of the DragNDropz image or file embedded widget to a gallery or folder. To use this feature, edit a gallery or folder, and make sure the "DragNDropz Integration Enabled" option is checked (enabled). While editing your gallery or folder settings, you can also set the maximum number of uploads any user may upload per day. After you have adjusted the "Max Uploads Per Day" setting and verified that gallery or folder integration is enabled on the specific gallery or folder of your choice, your embedded widget must be configured with two additional options.

For the image uploading widget, you must specify the gallery ID you intend to allow users to upload into from your app. You can get the gallery ID by clicking on the "Generate HTML Embed Code" share wizard button next to the gallery, scroll down, and copy the "Embed Gallery ID" input field (assuming the DragNDropz integration option has been enabled in the settings for the gallery). You must also specify the gallery's embed key. You can get the gallery embed key by clicking on the "Generate HTML Embed Code" share wizard button next to the gallery, scroll down, and copy the "Embed Key" input value (assuming the DragNDropz integration option has been enabled in the settings for the gallery).

		$("div.dndImage").initDragNDropz({
			width: "500",
			height: "600",
			backgroundColor: "green",
			backgroundImage: "none",
			theme: "dark",
			embedKey: '9323dfaek12KeyHere', // Embed key received from DragNDropz Pro account for specific gallery
			galleryId: 13 // Gallery ID received from DragNDropz Pro account for specific gallery
		});
		
		// It is recommended that you do NOT set the maxFiles initialization option since the configured max number of uploads per day will apply instead
		// However, you can set it if you'd only like a user to upload a certain number of files per session (but can do that multiple times during the day until the limit is reached)

For the file uploading widget, you must specify the folder ID you intend to allow users to upload into from your app. You can get the folder ID by clicking on the "Get Folder Share Link" share wizard button next to the folder. In this window, copy the "Embedded Folder ID" input field (assuming the DragNDropz integration option has been enabled in the settings for the folder). You must also specify the folders's embed key. You can get the folder embed key by clicking on the "Get Folder Share Link" share wizard button next to the gallery. In this window, copy the "Embedded File Upload Key" input value (assuming the DragNDropz integration option has been enabled in the settings for the folder).

		$("div.dndFile").initFileDragNDropz({
			width: "500",
			height: "600",
			backgroundColor: "green",
			backgroundImage: "none",
			theme: "dark",
			embedKey: '9323dfaek12KeyHere', // Embed key received from DragNDropz Pro account for specific folder
			folderId: 13 // Folder ID received from DragNDropz Pro account for specific folder
		});
		
		// It is recommended that you do NOT set the maxFiles initialization option since the configured max number of uploads per day will apply instead
		// However, you can set it if you'd only like a user to upload a certain number of files per session (but can do that multiple times during the day until the limit is reached)

If you do NOT specify the correct embed key and ID combination, users will be limited to the typical DragNDropz upload limit when uploading files. Setting these values allows you to control the number of files uploaded per day by users (1 up to 150 per day). All files uploaded from your application will apply to your account space and specified folder or gallery. While using this mode allows you to specify your user limits, DragNDropz will NOT allow your user uploads to exceed the space limit tied to your account. Furthermore, images and files uploaded using this pro feature are manageable by your account. You can delete and moderate all files and pictures uploaded by your application users.

Pro User API Endpoints

DragNDropz has a powerful and easy to use API that can be used to perform certain batch operations. The below endpoints require the usage of your account API key (Pro User only feature). Your API key can be obtained by logging into DragNDropz, hovering over your username in the top right, and then clicking on "Get Account API Key".

Endpoints:

batchDeleteImage - https://dragndropz.com/api/public_api.php?action=batchDeleteImage&key={YOUR_API_KEY_HERE}&ids=388,386,317 - can also be a POST request where ids is an array of image IDs you want to delete.
batchDeleteFile - https://dragndropz.com/api/public_api.php?action=batchDeleteFile&key={YOUR_API_KEY_HERE}&ids=388,386,317 - can also be a POST request where ids is an array of file IDs you want to delete.

The return value is a JSON object with message and success keys. The success property can be set to true, false, or "partial". The message property contains the result message with more information.

Complete PHP Example

Live Example with Multiple Widget Instances (not recommended, but possible). Please view the complete source of the linked example on GitHub.