title: Django: File upload and save using Ajax
body: <p>I'm not sure if somehow the directory is wrong or there's just some kind of common mistake in my code, but I just am not able to save my uploaded file to a folder, or more specifically, the media folder as demonstrated in a lot of examples.</p>
  <p>I'm just taking a text field and the file and saving it in the DB using Ajax, and it works too, except that whatever file I'm selecting, it's not getting saved in the media folder even if I create one manually nor is it creating one on its own either. I can get this to work without Ajax but not with it. Maybe it's something related to how I'm sending and handling data over Ajax, but I've gone through tons of forums to try and fix it but no results so far. I've double checked everything else such as the settings.py config and the libraries that I've imported, everything looks to be in order. I'm sharing the code below.</p>
  <p><strong>index.html</strong></p>
  <pre><code>&lt;body&gt;
  &lt;div class=&quot;container-fluid&quot;&gt;
      &lt;div class=&quot;col-md-4&quot;&gt;
          &lt;form id=&quot;data&quot; enctype=&quot;multipart/form-data&quot;&gt;
              &lt;label for=&quot;docn&quot;&gt;
                  &lt;input type=&quot;text&quot; id=&quot;docn&quot; placeholder=&quot;Please enter document name&quot;&gt;
              &lt;/label&gt;
  
              &lt;label for=&quot;docc&quot;&gt;
                  &lt;input type=&quot;file&quot; id=&quot;doc&quot; name=&quot;docu&quot;&gt;
              &lt;/label&gt;
  
              &lt;button type=&quot;button&quot; onclick=&quot;enterdata()&quot;&gt;Submit&lt;/button&gt;
  
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      function enterdata() {
          var token = '{{ csrf_token }}';
          alert('csrf generated');
  
          $.ajax({
              type: 'POST',
              url: '/user',
              data: {
                  dcn: $('#docn').val(),
                  dc: $('#doc').val(),
              },
              headers: {'X-CSRFToken': token},
              success: function () {
                  alert(&quot;Added&quot;);
              }
          })
  
      }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  <p><strong>views.py</strong></p>
  <pre><code>from django.shortcuts import render
  from django.http import HttpResponse
  from fileup.models import *
  from django.core.files.storage import FileSystemStorage
  
  def insert(request):
      return render(request, 'index.html')
  
  def testing_data(request):
      if request.method == 'POST':
          dcn1 = request.POST['dcn']
          dc = request.POST['dc']
  
          request_file = request.FILES['docu'] if 'docu' in request.FILES else None
          if request_file:
              fs = FileSystemStorage()
              file = fs.save(request_file.name, request_file)
              fileurl = fs.url(file)
  
          FileDB.objects.create(
              docname=dcn1,
              doc=dc,
          )
  
          return HttpResponse('')
  </code></pre>
  <p><strong>urls.py</strong></p>
  <pre><code>urlpatterns = [
      path('admin/', admin.site.urls),
      path('', insert),
      path('user', testing_data),
  ]
  if settings.DEBUG:
      urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
  </code></pre>
  <p><strong>models.py</strong></p>
  <pre><code>from django.db import models
  
  class FileDB(models.Model):
      docname = models.CharField(max_length=255)
      doc = models.FileField()
  
  </code></pre>
  <p><strong>settings.py config</strong></p>
  <pre><code>MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  MEDIA_URL = '/media/'
  </code></pre>
  <p>That's the complete project. The end goal is to save the path and filename in the DB with the selected file uploaded in the media folder. The former is being done but with no positive results from the latter.</p>
  <p>Thank you.</p>