Django Image Upload working but not General File

Question

I am facing a situation where I am able to upload Images, but not general files. I am using javascript to track the progress, which says file upload is successful, but file is not there in the media folder. When I do that for images, it works. Basically, image upload was working, and I tried to copy the same thing and do it for general file upload. Here is the code below.

Models

class Upload(models.Model):  # image upload model
    image = models.ImageField(upload_to='images')

    def __str__(self):
        return str(self.pk)


class FileUpload(models.Model): # file upload model
    video = models.FileField(upload_to='fileuploads/')

    def __str__(self):
        return str(self.pk)

Forms:

class UploadForm(forms.ModelForm):
    class Meta:
        model = Upload
        fields = ('image',)

class FileUploadForm(forms.ModelForm):
     class Meta:
        model = FileUpload
        fields = ('video',)

Views:

def home_view(request):
    form = UploadForm(request.POST or None, request.FILES or None)
    if request.is_ajax():
        if form.is_valid():
            form.save()
            return JsonResponse({'message': 'hell yeah'})
    context = {
        'form': form,
    }
    return render(request, 'uploads/main.html', context)


def file_view(request):
    form = FileUploadForm(request.POST or None, request.FILES or None)
    if request.is_ajax():
        if form.is_valid():
            form.save()
            return JsonResponse({'message': 'hell yeah'})
    context = {
        'form': form,
    }
    return render(request, 'uploads/main1.html', context)

The HTML template for Image Upload

{% extends "uploads/base.html" %}

{% block content %}

    <div id="alert-box"></div>
    <div id="image-box"></div>
    <br>
    <form action="" id="upload-form">
        {% csrf_token %}
        {{form.as_p}}
    </form>
    <br>
    <div id="progress-box" class="not-visible">progress</div>
    <div id="cancel-box" class="not-visible">
        <button id="cancel-btn" class="btn btn-danger">cancel</button>
    </div>

{% endblock content %}

The only difference with html template for File upload is

 {% extends "uploads/base1.html" %}

Which I use a different base html template.

Settings:

STATIC_URL = '/static/'


STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')

MEDIA_ROOT = os.path.join(BASE_DIR,'media')
MEDIA_URL = "/media/"

I am using the code from here - https://github.com/hellopyplane/Progress-bar

Answer 1

The javascript code uses a hardcoded field "image", which is called "video" in your second form.