Home > Net >  How to upload images with AJAX in DJANGO
How to upload images with AJAX in DJANGO

Time：02-27

  /* Add property modal */

.add-property {
  position: relative;
  width: 60rem;
  height: 35rem;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 15px;
}

.modal-title {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

.close {
  background-color: transparent;
  border: none;
}

#footer-btn {
  position: relative;
  left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  border: 0.1em solid black;
  border-radius: 10px;
  width: 5em;
  height: 2.5em;
  font-weight: 600;
  margin-bottom: 1.2em;
}

.add-prop {
  background-color: #3498db;
  color: white;
}

.add-prop:hover {
  background-color: rgb(12, 65, 180);
}

.add-inpt {
  outline: none;
  border-width: 0 0 0.17em;
  border-color: black;
  border-radius: 5px;
  width: 15em;
  height: 2em;
  text-align: center;
}

.prop-info-row {
  height: 15em;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.prop-info-col {
  height: 2em;
}

.add-inpt::placeholder {
  text-align: center;
}

.main-add-row {
  width: 50rem;
  height: 26rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
}

#property-types {
  background-color: white;
  height: 2.5em;
  width: 13em;
  border-radius: 5px;
}


/* SIDE NAV INSIDE ADD PROPERTY MODAL */

.side-nav,
.nav-menu {
  height: 100%;
}

.side-nav .nav-menu {
  list-style: none;
  padding: 40px 0;
  width: 13em;
  background-color: #3498db;
}

.side-nav .nav-item {
  position: relative;
  padding: 0.7em 1.5em;
  position: relative;
  top: 42%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav-item.active {
  background-color: #fff;
  box-shadow: 0px -3px rgba(0, 0, 0, 0.2), 0px 3px rgba(0, 0, 0, 0.2);
}

.nav-item.active a {
  color: #2980b9;
}

.nav-item a {
  text-decoration: none;
  color: #fff;
}

.menu-text {
  padding: 0 20px;
}

.side-nav .nav-item.active::before {
  content: "";
  position: absolute;
  background-color: transparent;
  bottom: 100%;
  right: 0;
  height: 150%;
  width: 20px;
  border-bottom-right-radius: 25px;
  box-shadow: 0 20px 0 0 #fff;
}

.side-nav .nav-item.active::after {
  content: "";
  position: absolute;
  background-color: transparent;
  top: 100%;
  right: 0;
  height: 150%;
  width: 20px;
  border-top-right-radius: 25px;
  box-shadow: 0 -20px 0 0 #fff;
}


/* UPLOAD IMAGE STYLE */

:root {
  --clr-white: rgb(255, 255, 255);
  --clr-black: rgb(0, 0, 0);
  --clr-light: rgb(245, 248, 255);
  --clr-light-gray: rgb(196, 195, 196);
  --clr-blue: rgb(63, 134, 255);
  --clr-light-blue: rgb(171, 202, 255);
}


/* End General Styles */


/* Upload Area */

.upload-area {
  width: 100%;
  max-width: 25rem;
  background-color: var(--clr-white);
  box-shadow: 0 5px 10px rgb(218, 229, 255);
  border: 2px solid var(--clr-light-blue);
  border-radius: 24px;
  padding: 1rem 1.875rem 0rem 1.875rem;
  margin: 0.625rem;
  text-align: center;
}


/* Header */

.upload-area__title {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 0.3125rem;
}

.upload-area__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin-top: 0;
}

.upload-area__tooltip {
  position: relative;
  color: var(--clr-light-blue);
  cursor: pointer;
  transition: color 300ms ease-in-out;
}

.upload-area__tooltip:hover {
  color: var(--clr-blue);
}

.upload-area__tooltip-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -125%);
  min-width: max-content;
  background-color: var(--clr-white);
  color: var(--clr-blue);
  border: 1px solid var(--clr-light-blue);
  padding: 0.625rem 1.25rem;
  font-weight: 500;
  opacity: 0;
  visibility: hidden;
  transition: none 300ms ease-in-out;
  transition-property: opacity, visibility;
}

.upload-area__tooltip:hover .upload-area__tooltip-data {
  opacity: 1;
  visibility: visible;
}


/* Drop Zoon */

.upload-area__drop-zoon {
  position: relative;
  height: 13.8rem;
  /* 180px */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px dashed var(--clr-light-blue);
  border-radius: 15px;
  margin-top: 1.1rem;
  cursor: pointer;
  transition: border-color 300ms ease-in-out;
}

.upload-area__drop-zoon:hover {
  border-color: var(--clr-blue);
}

.drop-zoon__icon {
  display: flex;
  font-size: 3.75rem;
  color: var(--clr-blue);
  transition: opacity 300ms ease-in-out;
}

.drop-zoon__paragraph {
  font-size: 0.9375rem;
  color: var(--clr-light-gray);
  margin: 0;
  margin-top: 0.625rem;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__icon,
.drop-zoon:hover .drop-zoon__paragraph {
  opacity: 0.7;
}

.drop-zoon__loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  color: var(--clr-light-blue);
  z-index: 10;
}

.drop-zoon__preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.3125rem;
  border-radius: 10px;
  display: none;
  z-index: 1000;
  transition: opacity 300ms ease-in-out;
}

.drop-zoon:hover .drop-zoon__preview-image {
  opacity: 0.8;
}

.drop-zoon__file-input {
  display: none;
}


/* (drop-zoon--over) Modifier Class */

.drop-zoon--over {
  border-color: var(--clr-blue);
}

.drop-zoon--over .drop-zoon__icon,
.drop-zoon--over .drop-zoon__paragraph {
  opacity: 0.7;
}


/* (drop-zoon--over) Modifier Class */

.drop-zoon--Uploaded .drop-zoon__icon,
.drop-zoon--Uploaded .drop-zoon__paragraph {
  display: none;
}


/* File Details Area */

.upload-area__file-details {
  height: 0;
  visibility: hidden;
  opacity: 0;
  text-align: left;
  transition: none 500ms ease-in-out;
  transition-property: opacity, visibility;
  transition-delay: 500ms;
}


/* (duploaded-file--open) Modifier Class */

.file-details--open {
  height: auto;
  visibility: visible;
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<button data-bs-toggle="modal" data-bs-target="#ModalAddProperty"  id="add-property">Add
            Property</button>

<form action="" enctype="multipart/form-data" method="POST" id="id_ajax_upload_form">
  {% csrf_token %}
  <div  id="ModalAddProperty" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div  role="document">
      <div >
        <div >
          <h5  id="exampleModalLongTitle">Add Property</h5>
          <button type="button"  data-bs-dismiss="modal" aria-label="Close">
                            <i ></i>
                        </button>
        </div>
        <div  style="padding: 0;">
          <div >

            <div  style="padding: 0;">
              <nav >
                <ul >
                  <li  id="img-nav-link">
                    <a href="#">
                      <i ></i>
                      <span >Upload Image</span>
                    </a>
                  </li>
                  <li  id="prop-info-nav-link">
                    <a href="#">
                      <i ></i>
                      <span >Propery Info</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>

            <div  id="toggle-content-add-modal">

              <!-- UPLOAD IMAGE SECTION START -->
              <div id="uploadArea"  data-target="img-nav-link">
                <!-- Header -->
                <div >
                  <h1 >Upload your file</h1>
                  <p >
                    File should be an image
                    <strong >
                                                Like
                                                <span ></span>
                                                <!-- Data Will Come From Js -->
                                            </strong>
                  </p>
                </div>
                <!-- End Header -->

                <!-- Drop Zoon -->
                <div id="dropZoon" >
                  <span >
                                            <i class='bx bxs-file-image'></i>
                                        </span>
                  <p >Drop your file here or Click to browse</p>
                  <span id="loadingText" >Please Wait</span>
                  <img src="" alt="Preview Image" id="previewImage"  draggable="false">
                  <input type="file" id="fileInput-single"  accept="image/*">
                </div>
                <!-- End Drop Zoon -->

                <!-- File Details -->
                <div id="fileDetails" >
                  <div id="uploadedFile" >
                    <div >
                      <i class='bx bxs-file-blank uploaded-file__icon'></i>
                      <span ></span>
                      <!-- Data Will be Comes From Js -->
                    </div>
                    <div id="uploadedFileInfo" >
                      <span >Project 1</span>
                      <span >0%</span>
                    </div>
                  </div>
                </div>
                <!-- End File Details -->
              </div>
              <!-- UPLOAD IMAGE SECTION END -->

              <!-- PROPERTY INFO START -->
              <div  data-target="prop-info-nav-link" style="display: none;">
                <div >
                  <p style="font-weight: 600;">Property Type</p>
                </div>
                <div >
                  <select name="property-types" id="property-types">
                    <option value="volvo">Tenament</option>
                    <option value="saab">Car</option>
                    <option value="opel" selected>Helicopter</option>
                    <option value="audi">Space Shuttle</option>
                  </select>
                  <div >
                    <span  id="basic-addon1">OR</span>
                    <input type="text"  id="new-prop-type" placeholder="Enter a new type" aria-label="Property-Type" aria-describedby="basic-addon1" autocomplete="off">
                  </div>
                </div>
                <div >
                  <input type="text" id="prop-name"  placeholder="Property Name" autocomplete="off">
                </div>
                <div >
                  <input type="text" id="prop-address"  placeholder="Property Address" autocomplete="off">
                </div>
              </div>
              <!-- PROPERTY INFO END -->
            </div>

          </div>
        </div>
        <div >
          <button type="submit"  id="footer-btn" data-bs-dismiss="modal">Add</button>
        </div>
      </div>
    </div>
  </div>
</form>

I have been using AJAX recently with DJANGO to send text data. It has been working smoothly and feels an easy method. But I cant understand and there no proper resource to learn to send images with AJAX and save to Django Database.

HTML:

<input type="file" id="fileInput-single"  accept="image/*">

JS:

        $(".add-prop").click(function() {
            var data = new FormData();
            data.append("image", $("#fileInput-single")[0].files[0])
            data.append("csrfmiddlewaretoken", $("input[name=csrfmiddlewaretoken]").val())
            $.ajax({
                method: "POST",
                url: "{% url 'upload-prop-images' %}",
                processData: false,
                contentType: false,
                mimeType: "multipart/form-data",
                data: data,
                success: function(data) {
                    if (data.status == "Upload Done") {
                        console.log("Uploading Done successfully")
                    }
                }
            })
        });

models.py

class Property(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, related_name='property_user')
    prop_images = models.ImageField(upload_to="prop_images")

views.py

def uploadPropImages(request):
    image = request.POST['image']

    property_new = Property(user_id=request.user.id, prop_images=image)
    property_new.save()

    return JsonResponse({'status': 'Upload Done'})

urls.py

urlpatterns = [
    path('upload-prop-images/', views.uploadPropImages, name='upload-prop-images')
]

There is one tutorial using the forms.py file but I don't want to create a forms.py file.

CodePudding user response：

HTML

<form id="upload-file" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="file">
    <button type="submit" >Upload</button>
</form>

JS

$('body').on('submit','#upload-file',function(e){
   e.preventDefault()
   var formData = new FormData(this);
   $.ajax({
         url:'/url/',
         type: 'POST',
         data: formData,
         success: function (response) {
         },
         error: function (response) {
         },
        cache: false,
        contentType: false,
        processData: false
   });

VIEWS.py

def fileupload(request):
     if request.method=="POST":
          property = Property()
          property.prop_images = request.FILES['file_name']
          property.user = self.request.user.username
          property.save()
      return JsonResponse({})

Page link：https//www.codepudding.com/net/316650.html

Prev:How to have a array inside an object in django rest framework api
Next:Error When Using Pip To Get Python Packages On Linux Terminal
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding