{"id":20455353,"url":"https://github.com/alexmhack/django-multiple-file-uploads-ajax","last_synced_at":"2025-03-05T10:21:11.822Z","repository":{"id":53822733,"uuid":"163787244","full_name":"Alexmhack/Django-Multiple-File-Uploads-AJAX","owner":"Alexmhack","description":"Uploading multiple files to django model using ajax","archived":false,"fork":false,"pushed_at":"2019-01-02T13:44:00.000Z","size":295,"stargazers_count":5,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-02T18:45:04.577Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alexmhack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-02T02:56:55.000Z","updated_at":"2023-08-27T01:36:35.000Z","dependencies_parsed_at":"2022-08-22T03:20:41.163Z","dependency_job_id":null,"html_url":"https://github.com/Alexmhack/Django-Multiple-File-Uploads-AJAX","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/Alexmhack%2FDjango-Multiple-File-Uploads-AJAX","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2FDjango-Multiple-File-Uploads-AJAX/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2FDjango-Multiple-File-Uploads-AJAX/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2FDjango-Multiple-File-Uploads-AJAX/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexmhack","download_url":"https://codeload.github.com/Alexmhack/Django-Multiple-File-Uploads-AJAX/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242006161,"owners_count":20056515,"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-11-15T11:18:38.431Z","updated_at":"2025-03-05T10:21:11.795Z","avatar_url":"https://github.com/Alexmhack.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Django-Multiple-File-Uploads-AJAX\nUploading multiple files to django model using ajax and jQuery plugin\n\n## Usage\n1. Run the django server \n\t```python manage.py runserver``` from the root folder of repo\n\n2. Open [http://127.0.0.1:8000/photos/basic-upload/](http://127.0.0.1:8000/photos/basic-upload/)\n\n3. Hit the upload photo button and select as many **images** you need to upload and hit open button\n\n4. The uploaded images will be listed in the table below with their apropriate links, click\n\tthe link and you get the image displayed.\n\n5. The images are uploaded to **media/{current year}/{current month}/{current date}/**\n\n## Installation\nIn any existing Django project configure the settings for the media files by adding\n\n**settings.py**\n```\nMEDIA_URL = '/media/'\n\nMEDIA_ROOT = os.path.join(BASE_DIR, 'media')\n```\n\nThen create a folder named **media** in the root directory of the project.\n\nAnd to test the uploads in the development environment, add this to the bottom of the root \nurlconf:\n\n**urls.py**\n```\nfrom django.contrib import admin\nfrom django.urls import path, include\nfrom django.conf.urls.static import static\nfrom django.conf import settings\n...\nurlpatterns = [\n\t...\n]\n\nif settings.DEBUG:\n    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)\n```\n\n## jQuery Usage\nNow the rest are static assets, mostly JavaScript assets. Here’s what we are going to use:\n\n1. Bootstrap 3.3.7\n2. jQuery 3.1.1 - Base dependency of the plug-in.\n3. [jQuery File Upload 9.14.1](https://github.com/blueimp/jQuery-File-Upload/releases/tag/v9.14.1)\n\nI will be using the internet cdn you can serve the files from static folder for [jquery](https://github.com/jquery/jquery/releases/tag/3.1.1) and [bootstrap](https://github.com/twbs/bootstrap/releases/tag/v3.3.7) by downloading them from their github repos.\n\nWe will use the cdn for jquery and bootstrap in the base file and add a django template \nblock for the jquery file upload plugin code.\n\n## Photos\nNow let's create a model for uploading our files to by creating a django app by running,\n\n```\npython manage.py startapp photos\n```\n\nThen create a simple model for uploading images with a title and also storing the date and \ntime when the photo object is created and edited.\n\n**photos/models.py**\n```\nfrom django.db import models\n\nfrom .utils import photo_directory_path\n\nclass Photo(models.Model):\n\ttitle = models.CharField(max_length=256)\n\tfile = models.ImageField(upload_to=photo_directory_path)\n\ttimestamp = models.DateTimeField(auto_now=True)\n\tupdated = models.DateTimeField(auto_now_add=True)\n```\n\n**NOTE:** We are using the ```ImageField``` in our model so we need to install the [pillow](https://pillow.readthedocs.io/en/5.3.x/installation.html) module also.\n\nAlso we are using a seperate file for storing the utils function like the ```photo_directory_path``` which will upload the photo to **MEDIA_ROOT/photos/2018/01/2** and \nofcourse the date depends on the current date in your computer.\n\n**photos/utils.py**\n```\ndef photo_directory_path(instance, filename):\n\t\"\"\"file will be saved to MEDIA_ROOT/photos/2018/01/2\"\"\"\n\treturn 'photos/%Y/%m/%d/'\n```\n\nThe form for uploading files is also very simple,\n\n**photos/forms.py**\n```\nfrom django import forms\n\nfrom .models import Photo\n\nclass PhotoForm(forms.ModelForm):\n\tclass Meta:\n\t\tmodel = Photo\n\t\tfields = '__all__'\n```\n\n## Basic File Upload\nWe need a url route for uploading our files so create new file named **urls.py** inside **photos** folder\n\n**photos/urls.py**\n```\nfrom django.urls import path\n\nfrom .views import BasicFileUploadView\n\napp_name = 'photos'\n\nurlpatterns = [\n\tpath('basic-upload/', BasicFileUploadView.as_view(), name='basic-upload')\n]\n```\n\nNow the view,\n\n**photos/views.py**\n```\nfrom django.shortcuts import render\nfrom django.views import View\nfrom django.http import JsonResponse\n\nfrom .models import Photo\nfrom .forms import PhotoForm\n\nclass BasicFileUploadView(View):\n\tdef get(self, request):\n\t\tphotos = Photo.objects.all()\n\t\tcontext = {'photos': photos}\n\t\treturn render(request, 'photos/basic_upload.html', context)\n\n\tdef post(self, request):\n\t\tform = PhotoForm(self.request.POST, self.request.FILES)\n\t\tif form.is_valid():\n\t\t\tphoto = form.save()\n\t\t\tdata = {'is_valid': True, 'name': photo.file.name, 'url': photo.file.url}\n\t\telse:\n\t\t\tdata = {'is_valid': False}\n\t\treturn JsonResponse(data)\n```\n\nThe ```django.views.View``` allows us to create a class based view in which we can define \nthe get and post methods and their functionalities.\n\nIn ```GET``` request to our url we simple pass all the photos in the context and render the \n**photos/basic_upload.html** file. You can look at its code in **templates/photos/basic_upload.html** \n\nAlso the frontend javascript is in **static/jquery/js/basic_upload.js** file which opens \nthe windows explorer and initiate the file uploading process.\n\nRun the server and click the **upload photos** button and select as many images you want to \nupload and press **open** and the file data will show up in the table.\n\n**There is also code for drag and drop files upload and a progress bar that shows file \nuploading progress.**\n\n**For any doubts or queries, start a issue in the repo. Will contact soon.**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmhack%2Fdjango-multiple-file-uploads-ajax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexmhack%2Fdjango-multiple-file-uploads-ajax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmhack%2Fdjango-multiple-file-uploads-ajax/lists"}