0

I implementing the drag and drop to submit the csv file. The csv file will be saved in my server folder and the content will be read and saved in my database. the usual choose folder can do it just fine but I want to make it drag and drop. Currently I can drag the name but I cant put the file in input

UploadData.jsp

    <form action="UploadDataServlet" method="POST" enctype="multipart/form-data">
    <div class="d-flex justify-content-center mt-4 mb-4"> 
    <div class="upload-container">
        <div class="upload-container-border" style="height=100vh">
            <div class="">
            <div class="d-flex justify-content-center mb-2 upload-icon">
                <i class="fas fa-file-upload"></i>
            </div>
            
            <div class="upload-instruction mb-2">
                <div class="text-center upload-text">Drag and Drop the file here</div>
                <div class="text-center or">OR</div>
            </div>
            <div class="d-flex justify-content-center upload-btn">
                <input class="choose-btn" type="file" id="myFile" name="filename" accept=".csv, text/csv" required>
            </div>
            </div>
        </div>
    </div>
    </div>
    <% 
        session.setAttribute("password", acc.getPassword());
        session.setAttribute("username", acc.getUsername());
    %>
    <input type='hidden' name=<% out.print(fileType); %> value=<% out.print(fileType); %>>
    <div class="d-flex justify-content-center mt-4 mb-4">
        <input class="btn btn-secondary btn-sm submit-btn" type="submit" value="Submit">
    </div>
    </form>

script.js

/* Upload Data Page */

const dropArea = document.querySelector(".upload-container"),
input = dropArea.querySelector("input"),
text = dropArea.querySelector(".upload-text");

const inputArea = document.querySelector(".choose-btn");
const or = document.querySelector(".or");
const myFile = document.querySelector("#myFile");

let file;

input.addEventListener("change", function() {
    file = this.file[0];
    dropArea.classList.add("active");
})

dropArea.addEventListener("dragover", (event)=> {
    event.preventDefault();
    dropArea.classList.add("active");
    text.textContent = "Release the File";
})

dropArea.addEventListener("dragleave", ()=> {
    dropArea.classList.remove("active");
    text.textContent = "Drag and Drop the file here";
})

dropArea.addEventListener("drop", (event)=> {
    event.preventDefault();
    myFile.files = event.dataTransfer.files[0];
    //myFiles.file = evt.dataTransfer.files[0];
    showFile();
    })

function showFile() {
    let fileType = file.type;
    let fileName = file.name;
    let validExtensions = ["text/csv", ".csv", "application/vnd.ms-excel"];
    text.textContent = fileName;
    //inputArea.classList.add("d-none");
    //or.classList.add("d-none");
    
    if (!validExtensions.includes(fileType)) {
        alert("Please upload a csv (utf8) file");
        dropArea.classList.remove("active");
        inputArea.classList.remove("d-none");
        or.classList.remove("d-none");
        text.textContent = "Drag and Drop the file here";
    } else {
        dropUpload(event);
    }
}

function dropUpload(event) {
    event.stopPropagation();
    event.preventDefault();
    
    var formData = new FormData();
    formData.append("file", event.dataTransfer.files[0]);
    
}

thank you in advance if anyone could help me. I am new to jsp and servlet so it's quite a problem to me when I cant found anything that can help me

Sya
  • 1

1 Answers1

0

Drag and drop is a part view so its doesn't matter if you are selecting the file or using drag and drop you need to configure code manually if you are using java script ti handle it you need to submit it through onSubmit event or $("formname").on("submit",function(){

enter code here

});

Kapil
  • 9
  • 2