{"id":15798296,"url":"https://github.com/codeasashu/drop-it","last_synced_at":"2025-03-31T20:12:24.830Z","repository":{"id":11895704,"uuid":"14458770","full_name":"codeasashu/drop-it","owner":"codeasashu","description":"Now drop your favorite images right into web browser with great ease. Just include the plugin and start using it right away","archived":false,"fork":false,"pushed_at":"2017-07-14T10:48:08.000Z","size":14,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-05T00:40:58.762Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeasashu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-17T01:07:41.000Z","updated_at":"2014-11-29T19:16:02.000Z","dependencies_parsed_at":"2022-09-14T22:03:14.612Z","dependency_job_id":null,"html_url":"https://github.com/codeasashu/drop-it","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeasashu%2Fdrop-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeasashu%2Fdrop-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeasashu%2Fdrop-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeasashu%2Fdrop-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeasashu","download_url":"https://codeload.github.com/codeasashu/drop-it/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246531975,"owners_count":20792736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-05T00:40:43.827Z","updated_at":"2025-03-31T20:12:24.799Z","avatar_url":"https://github.com/codeasashu.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Drop-it!\n=======\n\nNow drop your favorite images right into web browser with great ease. \nJust include the plugin and start using it right away\n\n[Check out the demo](http://makefbcovers.com/demos/drag \"Dropt It! Demo\")\n\nPlease refer to the following steps to start using it.\n\nBasic usage:\n=======\n\nThe basic usage of the plugin start with only a single line of code.\n\n`````javascript\n $('#drop-target').bhs_uploader(); //Just a single line\n`````\n\nThis will make a division with id `drop-target` to be droppable. \n\nCurrently, the plguin supports following options and method.\n\n## 1. fileUpload\n\nThis option provides ability to include files in the drop region uploaded from any file uploader.\nFor example, if you have any other file uploader like:\n\n`````html\n\u003cinput id=\"files-upload\" type=\"file\" multiple /\u003e\n`````\nthen you can just mention the id (\"#files-upload\") in fileUpload option in plugin, and it will automatically link the\ngiven file uploader to the drop area.\n\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({fileUpload: $('#files-upload')}); \n`````\n\n\n## 2. maxfile\n\nThis option lets you limit the number of files that can be dropped into drop area. Since the drop area can hold\nmultiple files at a time, so you may want to limit the number of files.\nThe plugin currently impose limit of 5 files by default. However, you can increase it to any number you want.\n\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({maxfile: 4}); \n`````\n\n## 3. onDragEnter\n\nThis option let you perform your code execution while some files that are to be dropped, enters the droppable area.\nYou can mention what you want to do inside the option *onDragEnter*\n\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({\n          onDragEnter : function(){\n\t\t\t\t\t    console.log('File entered the droppable region');\n\t\t\t\t}\n\t\t\t}); \n`````\n\n## 4. onDragOver\n\nThis option will enable you to perform any function/task you intented to do while files are over the droppable area.\nIt will continue to execute till the files remains over the droppable area.\n\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({\n          onDragOver : function(){\n\t\t\t\t\t    console.log('File are now over the droppable region');\n\t\t\t\t\t//This will continue to output till you pull the file away from droppable region\n\t\t\t\t}\n\t\t\t}); \n`````\n\n## 5. onDragLeave\n\nSimilar to above two options, this will execute when files being dropped leaves the drop area, such as in case you \nwanted to know if the files are actually dropped or not. This method is useful when you are curious to know if\nfile were just pulled away from dropped region without being dropped.\n\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({\n          onDragLeave : function(){\n\t\t\t\t\t    console.log('File are now leaving the droppable region');\n\t\t\t\t\t//This will output when you pull the file away from droppable region\n\t\t\t\t}\n\t\t\t}); \n`````\n\n## 6. preview\n\nThis option is one of the most import option which fulfils the need of file enquiery.\nIf you want to know how many files have been droppes, their names, size, total count etc., utilize this function\nto get every details for every files contained in the drop area.\n\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({\n          preview : function(data){   //Type of data is array which holds detail of every files including errors\n\t\t\t\t\t    console.log('Total number of files dropped till now:'+ data.count);\n\t\t\t\t\t   //This will show you how many **valid** files have been dropped\n\t\t\t\t}\n\t\t\t}); \n`````\n\nThe `data` is type of array object which contains releavent informations about the files being dropped.\nThe `data` object looks like following array\n`````\nObject {\n        fileinfo: \n            {0: File\n              {\n                handle: \"glg1g\",\n                name: \"filename.png\",\n                size: 45629, //in bytes\n                src: \"data:image/png;base64,iVBORw0KGgoAAAANSUh.... \", //Base-64 encoded data for image\n                type: \"image/png\"\n              }\n            }, \n        error: \n            {\n              0: \"some error occured\" //errors if there are any\n            }, \n        count: 2  //Total 2 **valid** files are dropped\n        }\n`````\n\nSo using this array, you can extractb each files details. Here is a jQuery code sample\n`````javascript\n  var errors;\n  \n  $('#drop-target').bhs_uploader({\n          preview : function(data){   //Type of data is array which holds detail of every files including errors\n\t\t\t\t\t    console.log('Total number of files dropped till now:'+ data.count);\n\t\t\t\t\t   //This will show you how many **valid** files have been dropped\n\t\t\t\t\t   for(var i =0; i\u003cdata.count;i++){\n\t\t\t\t\t      console.log('File Name:'+ data.fileinfo[i].name);\n\t\t\t\t\t      console.log('File Size:'+ data.fileinfo[i].size);\n\t\t\t\t\t      console.log('File type:'+ data.fileinfo[i].type);\n\t\t\t\t\t      console.log('File handle:'+ data.fileinfo[i].handle); //Used to uniquely represent the files\n\t\t\t\t\t      errors = data.error; //Store the errors\n\t\t\t\t\t   }\n\t\t\t\t}\n\t\t\t}); \n`````\n\nYou might be surprised by the `handle` object.\n\n**Ok, so what this `handle` is?** \n`handle` is a file handler this plugin uses to help you recoginze each file uniquely in a cluster of multiple files.\nAs you know, this plugin supports multiple file drops, there may arise a situation when you want to apply some action\nagainst each file that are being droppes. But how will you recognize the file?\n\nFor example, suppose that you want check progress (while being uploaded) of each file that were dropped.\nIf you want to upload multiple files at once, you have to be sure about which file is currently being uploaded.\nSince there can be multiple files of same name and size, even of same __data source__ (i mean they are same images),\nthen you definitely need some unique. Here comes the role of `handle` object.\n\nIt comes with the array of file information, which you can use as file identifier.\n\n## 7. thumb\n\nThis option gives flexibility to get the instant data for each uploaded file individually. \nThe basic purpose of introduction of this option was to overcome the __HTML FileReader__ `onloadcomplete` event.\nThe `process` option gets all the file details **prematurely** i.e, before the __HTML FileReader__ `onloadcomplete` \nevent is still in process. \n\nHowever, if you use the `process` method by explicit method, you will get the data. Hence, this option is\nintroduced which will not be called **prematurely**. This option will return the data of uplaoded files along\nwith primitive details. Hence, you can now utilize this function to process all uploaded files.\n\n\u003e For the drawback of `process` function that we have just noted, you can still use the option to call any\nof your callbacks when you are finished uploading. \n\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({\n          thumb : function(data){\n          \t\t//Use data[0] instead \n          \t\tvar file = data[0];\n\t\t  \t\tconsole.log(\"File Handle: \"+file.handle);\n\t\t\t\tconsole.log(\"File Name: \"+file.name);\n\t\t\t\tconsole.log(\"File Size: \"+file.size);\n\t\t\t\tconsole.log(\"File Data: \"+file.src);\n\t\t\t\t}\n\t\t\t}); \n`````\n\n## 8. error\n\nFinally this option is all that left. This allows you to print any errors after the files been dropped.\nyou can know if there is some kind of invalid file that is dropped, or bumps in between. It will come handy\nwhen you have to deal with large number of files.\n\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({\n          error : function(response){   \n\t\t\t\t\t    console.log(response);\n\t\t\t\t\t   //This will print error in each line\n\t\t\t\t}\n\t\t\t}); \n`````\n\n## Full option usage\n\nNow that you have all the options described, you can use any or all or none in the plugin to start by.\nImagination is your limit.\nIf you want to use options, just include them in comma seperated list.\nExample-\n#### Useage:\n`````javascript\n  $('#drop-target').bhs_uploader({\n          fileUpload: $('#files-upload'),\n          maxfile: 4,\n          onDragEnter : function(){\n\t\t\t\t\t  console.log('file entered the drag area');\n\t\t\t\t  },\n          onDragOver : function(){\n\t\t\t\t\t  console.log('file is over the drag area');\n\t\t\t\t  },\n\t  onDragLeave : function(){\n\t\t\t\t\t  console.log('file left the drag area');\n\t\t\t\t  },\n\t  preview: function(data){\n\t\t\t\t    \t  console.log(data);\n\t\t\t\t  },\n          error : function(response){   \n\t\t\t\t\t  console.log(response);\n\t\t\t\t\t  //This will print error in each line\n\t\t\t\t}\n\t\t\t}); \n`````\n\n#Methods:\n\nThe plugin not only let you preview your files but also allow you to upload it as well.\nYou have to just write a backend code to handle the file uploads.\nApart from this, plugin also let you to view other properties as well, such as, all the uploaded files,\nfiles that have been dropped but not uploaded yet, etc.\n\nLets being with how to upload certain files.\n\n## 1. Upload\n\nThis function let you upload all the dropped files one by one to the desired location.\nAll you have to do is to mention the PHP/Backend code file that will handle the file uploads.\n\nThe minimal usage is:\n\n`````javascript\n  var arg = { file: 'upload-handler.php' };\n  $('#drop-files').data('bhs_uploader').upload(arg);\n//Or simply as\n//$('#drop-files').data('bhs_uploader').upload({file: 'upload-handler.php'});\n`````\n\n\u003e You might be wondering why it looks like `data('bhs_uploader')` ?\n\u003e Due to the nature of the plugin, and need to parse the arguments, keeping the current DOM context, I found it more\n\u003e appealing to use `data('bhs_uploader')` instead of just `bhs_uploader` .\n\u003e But does that make any difference?\n\n### file: \nThe file argument let you to mention the file which will handle the uploads.\n\u003e Don't forget to mention the path, if you have file at any other location than the same directory from which you are\n\u003e running this code. Example- `file: '/path/to/file/upload-handler.php'`\n\n### progress: \nApart from this, it also provides option to monitor progress of each files that are currently in the dropped area.\nThis option utilizes the same `data` array you have obtained previously in preview option.\nIt just adds a array `progress` to `data` by which you can monitor which file is under progress currently and what the\nprogress is.\n\n`````javascript\nvar arg = {\n    file: 'upload-handler.php',\n    progress: function(data){\n        //Use data[0] to extract details of current file\n        console.log('Current file being uploaded: '+data[0].name);\n        console.log('Current file\\'s handle: '+data[0].handle);\n        console.log('Current file\\'s progress: '+ data.progress); //Note here the use of *data* not *data[0]*\n        //Now we have the handle, you can apply the progress to the particular file as\n        $('.file-selector[data-handle='+data[0].handle+']').html('\u003cp\u003eThis file got'+data.progress+' % progresses');\n    }\n}\n//Now upload the files\n$('#drop-files').data('bhs_uploader').upload(arg);\n`````\n\n### done: \nThis is another option which will let you to know when each file gets uploaded. The return data is what you echoed in \nPHP backend file. This will be useful when you want to pass the result image data to the frontend.\n\n#### Usage:\n`````javascript\nvar arg = {\n    file: 'upload-handler.php',\n    progress: function(data){\n        //Use data[0] to extract details of current file\n        console.log('Current file being uploaded: '+data[0].name);\n        console.log('Current file\\'s handle: '+data[0].handle);\n        console.log('Current file\\'s progress: '+ data.progress); //Note here the use of *data* not *data[0]*\n        //Now we have the handle, you can apply the progress to the particular file as\n        $('.file-selector[data-handle='+data[0].handle+']').html('\u003cp\u003eThis file got'+data.progress+' % progresses');\n    },\n    done: function(response){\n      //data[0] will hold details of each completed files\n      //data[0].response;\n      console.log('File just uploaded: '+data[0].name);\n      console.log('File\\'s handle: '+data[0].handle);\n      console.log('File\\'s response from backend: '+data[0].response);\n    }\n}\n//Now upload the files\n$('#drop-files').data('bhs_uploader').upload(arg);\n`````\n  \n## 2. Uploaded\nThis function returns an array containing all the information of files that have been uploaded. It will **NOT** \ncontain the details of files that are under drop region currently. Well in that case, see next function.\n\n#### Usage:\n`````javascript\n  var uploaded = $('#drop-files').data('bhs_uploader').uploaded();\n  console.log(uploaded); //prints list of uploaded files\n`````\n\n## 3. Preview\nThis function returns an array containing all the information of files that are currently inside the droppable region\nbut not have uploaded yet.\n\n#### Usage:\n`````javascript\n  var preview = $('#drop-files').data('bhs_uploader').preview();\n  console.log(preview); //prints list of files under preview(i.e not have been uploaded yet)\n`````\n\n## 4. Dropped\nThis function returns an array containing all the information of the files that are currently in drop region as well\nas those which have been uploaded. This is much like summary of the files in current session.\n\nThis can be also summarized as:\n\u003e dropped() = preview() + uploaded()\n\n#### Usage:\n`````javascript\n  var dropped = $('#drop-files').data('bhs_uploader').dropped();\n  console.log(dropped); //prints list of all files (dropped plus under preview)\n`````\n\n## 4. RemoveAll\nThis function lets you to clear all the files and reset the webpage. This comes handy when you want to clear the\ndrop region for fresh start.\n\n#### Usage:\n`````javascript\n  $('#drop-files').data('bhs_uploader').removeAll(function(){\n    alert('Removed all the data');\n  });\n  console.log(dropped); //prints list of all files (dropped plus under preview)\n`````\n\n## 5. Error\nAnd finally the most integral part of any plugin. The error function will let you check if there has been any\nerrors till now. It will return the array containing all the errors that have been occured during any of the process.\n\n#### Usage:\n`````javascript\n  var errors = $('#drop-files').data('bhs_uploader').error();\n  console.log(errors); //prints list of all errors\n`````\n\nThats it folks. I have been pretty busy to maintain and develop this plugin. I soon will be uploading a nice demo \nto show you how actually it is being implemented and how easy it comes to be.\n\nI am also open to any suggestions. Please fork, clone this repo and help it make a big project.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeasashu%2Fdrop-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeasashu%2Fdrop-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeasashu%2Fdrop-it/lists"}