I am using Dropzone and Flask using html form to pass files. like this below:
<form
action="/"
enctype="multipart/form-data"
method="POST"
class="dropzone"
id="myAwesomeDropzone"
>
<div class="fallback">
<input
name="file"
id="file"
type="file"
accept=".csv, text/csv, text/plain, text/tsv, text/comma-separated-values"
/>
</div>
<div class="dz-message needsclick">
<i class="h1 text-muted dripicons-cloud-upload"></i>
<h3>Drop CSV file here or click to upload.</h3>
</div>
<div class="clearfix text-right mt-3">
<button type="submit" class="btn btn-danger"> <i class="mdi mdi-send mr-1"></i> Submit</button>
</div>
</form>
Here is my JS below:
<script>
// when the form myAwesomeDropzone has a file added
// submit the form
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 100,
maxFiles: 1,
maxFilesize: 20,
acceptedFiles: ".csv",
addRemoveLinks: true,
dictRemoveFile: "Remove",
dictFileTooBig:
"File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
dictInvalidFileType: "You can't upload files of this type.",
dictMaxFilesExceeded: "You can only upload 1 file.",
init: function () {
var myDropzone = this;
// if s CSV file is upload, submit the form with the csv file
this.on("addedfile", function (file) {
// Enable the submit button
document.querySelector("button[type='submit']").disabled = false;
});
},
};
</script>
In the Flask route:
@app.route("/", methods=["POST"])
@login_required
def process_csv_file():
print("request files: ", request.files)
file = request.files.get("file")
print("file: ", file)
data = pd.read_csv(io.StringIO(file.decode("utf-8")))
print("data: ")
print(data.head())
return "processed"
The request files are empty. I have tried using the button, removing the button and tried debugging whats wrong but I cant understand why the request files are empty. What could be the error?
Thanks in advance