Fetch file in Python. flask code coming from javascript - javascript

This is my javascript function which is routing a csv file to /uploader.
function getData() {
var csv=document.getElementById('myFile').files[0];
var formData=new FormData();
formData.append("uploadCsv",csv);
var request = new XMLHttpRequest();
//Open first, before setting the request headers.
request.open("POST", "/uploader", true);
//here you can set the request header to set the content type, this can be avoided.
//The browser sets the setRequestHeader and other headers by default based on the formData that is being passed in the request.
request.setRequestHeader("Content-type", "multipart/form-data"); //----(*)
request.onreadystatechange = function (){
if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
console.log(request.response);
}
}
request.send(formData);
}
My python function does get invoked to the app routing part seems to correct. However the request.files length is 0.
This is the python code -
#app.route("/uploader", methods=["POST"])
def post_javascript_data():
f = request.files["uploadCsv"]
print(f)
return "OK"
In the picture below you can see the request.files length remains 0. What am I doing wrong here?

The solution is to not manually set the header for the content type. This is set automatically.
The following is an example with XMLHttpRequest and alternatively with fetch.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Using XMLHttpRequest -->
<form name="upload-form-1">
<input type="file" name="upload-csv" accept="text/csv" />
<input type="submit" />
</form>
<script type="text/javascript">
(function() {
let form = document.querySelector("form[name='upload-form-1']");
form.addEventListener(
"submit",
(event) => {
event.preventDefault();
let xhr = new XMLHttpRequest();
xhr.open("POST", "/uploader");
xhr.onload = function() {
if(this.status === 200) {
console.log(this.response);
} else {
console.error(`Error ${this.status} occurred.`)
}
}
xhr.send(new FormData(event.target));
},
false);
})();
</script>
<!-- Using Fetch -->
<form name="upload-form-2">
<input type="file" name="upload-csv" accept="text/csv" />
<input type="submit" />
</form>
<script type="text/javascript">
(function() {
let form = document.querySelector("form[name='upload-form-2']");
form.addEventListener(
"submit",
(event) => {
event.preventDefault();
fetch("/uploader", {
method: "POST",
body: new FormData(event.target)
}).then(resp => {
console.log(resp);
}).catch(err => {
console.error(err);
});
},
false);
})();
</script>
</body>
</html>
from flask import abort, make_response, request
#app.route('/uploader', methods=['POST'])
def uploader():
if 'upload-csv' in request.files:
f = request.files['upload-csv']
# Use the object of the type werkzeug.FileStorage here.
return make_response('')
abort(400)
Have fun implementing your project.

Related

Ajax isn't fetching the text file

<!DOCTYPE html>
<head>
<title>
Ajax Joke of the Dya application
</title>
<script>
var Request = false;
if (window.XMLHttpRequest) {
Request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
Request = new ActiveXObject("Microsoft.XMLHTTP");
}
function RetrieveJoke(url, elementID) {
console.log("Ret")
if (Request) {
var RequestObj = document.getElementById(elementID);
Request.open("GET", url);
Request.onreadystatechange = function() {
if (Request.readystate == 4 && Request.status == 200) {
RequestObj.innerHTML = Request.responseText;
}
}
}
}
</script>
</head>
<body>
<h1> Where do bees go when they get married?</h1>
<button type="button" value="Fetch Answer" onsubmit="RetrieveJoke('honeymoon.txt','Target')"> ANSWERRR</button>
<form>
<input type="button" value="Fetch Answer" onsubmit="retrieveJoke('honeymoon.txt', 'Target')" />
</form>
<div id="Target"> </div>
</body>
</html>
so it's a simple joke of the day application to learn ajax wherein the the button is supposed to fetch the answer and we deplo ajax for the same
here is the ajax code that's supposed to fetched "Honeymoon!" that's written in honeymoon.txt file when we click on the answer and fetch answer button but it isn't??? Please help
You could just use this function
async function fetchData(path) {
const data = await fetch(path); // Fetching file content
return await data.text(); // Converting it to text and return
}
Then call it like this
const data = fetchData("./myfile.txt"); // Pass your file path here
console.log(data); // This will return your file content
So final answer could be
const button = document.querySelector("button"); // Your button
const result = document.querySelector("#Target"); // Your result div
button.addEventListener("click", function() {
const data = fetchData("./honeymoon.txt");
result.textContent = data;
});

How to send a video via XMLhttprequest and as multipart/form body content? Video not sent?

I have a webpage I am trying to allow a video to be sent to my API via XMLhttprequest as below:
<form onsubmit="submitBtn()">
<input type="file" accept="video/*" name="fileupload" value="fileupload" id="fileupload">
<label for="fileupload"> Select a file to upload
</label>
<input type="submit" value="submit">
</form>
<script language="javascript" type="text/javascript">
function submitBtn() {
var search = document.getElementById('fileupload').value;
if (search.length>0){
var text = search;
userAction(text);
}
}
</script>
<script language="javascript" type="text/javascript">
function userAction(res) {
var formData = new FormData();
formData.append("video", res);
var request = new XMLHttpRequest();
var api = 'myApi'
request.open('POST', api, true);
request.onload = function () {
// Begin accessing JSON data here
var data = this.response;
if (request.status >= 200 && request.status < 400) {
console.log('celebrate');
} else {
console.log('error');
}
}
request.send(formData);
}
</script>
This part seems to work fine, however, I don't believe the video itself is sent to my API. If I context.log(result.body) I get something similar to:
------WebKitFormBoundary1234
Content-Disposition: form-data; name="video"
C:\fakepath\videoname.mp4
------WebKitFormBoundaryq1234--
I wish to then send this video to another API as multipart/form body content.
I have attempted this by using:
function videoAPI (context, auth, vid, callback){
var body = vid;
var requestUrl = urlApi;
const requestOptions = {
hostname: requestUrl.hostname,
path: requestUrl.path,
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data',
}
};
var request = https.request(requestOptions, function(res) {
var data = "";
res.on('data', function (chunk) {
context.log('Response: ' + chunk);
data += chunk;
});
res.on('end', function () {
var jsonData = JSON.parse(data);
callback(jsonData);
});
})
request.write(body);
request.end();
}
Again, this functions, however, the response I get is:
Input is invalid. Input must specify either a video url, an asset id or provide a multipart content body
This seems to suggest that I am either not sending the video correctly, or I am not sending it correctly via the XMLhttprequest.
Can someone highlight where I have gone wrong and how to correct it please?
I am using nodejs and Azure.

Unable to access form data on serverside

I am making a put request from frontend for which I have been using XMLHttpRequest and FormData API request but server side I would not get any data like req.params, req.body and req.query all are empty
Front-end Code
var reportSub = () => {
var report = document.getElementById('report');
var formData = new FormData(report)
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.response)
}
}
var queryString = new URLSearchParams(formData);
xhr.open("PUT", '/threads/edit', true);
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
xhr.send(queryString)
}
var reportsub = document.querySelector('#repsub');
reportsub.addEventListener("click",(e)=>{
e.preventDefault();
reportSub();
})
Server Side code
router.put('/threads/edit',(req,res)=>{
let board = req.body.board;
let id = req.body.id;
console.log(req.query,req.body)
Board.findById({_id: ObjectId(id)},(error,data)=>{
if(error)
res.send(error)
if(data!==null){
data.Reprot = true;
data.save((error,sd)=>{
if(error)
res.send(error)
res.send(sd);
})
}
else{
res.send({"Error":"Id does not exist "})
}
})
})
There is one solution would be where you add data in url which again hard coded each in every variable and data you had to pass.
So thats I want use FormData interface for sending data.
I think you are missing a library for parsing the FormData request. You could also send the data using JSON as it is text-only, this would simplify parsing. A minimal example could look like the following:
server.js
const express = require("express");
const multer = require("multer");
const upload = multer();
const app = express();
app.use(express.static('public'))
app.post('/data', upload.none(), function (req, res) {
console.log(req.body.favoriteNumber);
res.send('42 is the only real choice');
});
app.listen(3000, function () {
console.log('App listening on port 3000!');
});
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form id="textForm">
<p>Your favorite number:</p>
<input type="text" value="42" name="favoriteNumber" />
</form>
<button id="send">Send</button>
<script>
const sendButton = document.getElementById("send");
const form = document.getElementById("textForm");
sendButton.addEventListener("click", () => {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.response);
}
}
const formData = new FormData(form);
xhr.open("POST", '/data', true);
xhr.send(formData);
})
</script>
</body>
</html>
You do not have to set the header manually. It is set automatically and does include boundary - a parameter you cannot know while writing the application. The header could look like the following:
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryuzeaYvzY77jzcFeA

How to make my HTTP request behave the same as a form

I'd need some help with my HTTP request. Here's the setup:
A webpage load an image to a form and send it to a python server running bottle (with the form or a custom http request)
Bottle receive the file, give it as an input for a python script, receive the result and return it to the webpage
On bottle's website there's an example with a form: https://bottlepy.org/docs/dev/tutorial.html#file-uploads I've tried it and it works. Here's the code I used:
<html>
<head>
</head>
<body>
<form action="http://localhost:8080/solve" method="POST" enctype="multipart/form-data" norm="form" id='myForm'>
Select a file: <input type="file" name="upload"/>
<input type="submit" value="Start upload" />
</form>
</body>
</html>
In bottle I have:
#route('/solve', method='POST')
def solve():
file = request.files.get('upload')
name, ext = os.path.splitext(file.filename)
if ext not in ('.png','.jpg','.jpeg'):
return 'File extension not allowed.'
print(file.name)
resolved = sudoku.solve(file.file)
return str(resolved)
This "works", but the form redirects me to localhost:8080 and it's not what I want. I tried putting the target to a hidden iFrame, which prevent the redirection, but I don't manage to access the result in the body of the iFrame...
What I want: Make an HTTP request similar to the one made by the form. So I tried:
<html>
<head> </head>
<body>
<form enctype="multipart/form-data" norm="form" id="myForm">
Select a file:
<input id="fileInput" type="file" name="upload" accept="image/png, image/jpeg, image/jpg" />
<input type="submit" value="Start upload" />
<label class="button-upload" onclick="send()">Upload</label>
</form>
</body>
<script>
var _file = null;
function send() {
var file = document.getElementById("fileInput").files[0]
console.log(file)
var url = "http://localhost:8080/solve";
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader(
"Content-Type",
"multipart/form-data; boundary=---------------------------169461201884497922237853436"
);
var formData = new FormData();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
formData.append("upload", file);
xhr.send(formData);
}
</script>
</html>
I've checked with the developper tool in network and the request seems to be the same as the one sent by the form, though bottle can't find the file.
The file = request.files.get('upload') returns None and file = request.files returns <bottle.FormsDict object at 0x7ff437abf400> so there's something but I don't understand how to access it!
Any help would be greatly appreciated!
Your JavaScript code seems fine, except for where you set request headers with xhr.setRequestHeader. FormData handles multipart encoding for you, you don't need to set request headers manually. I just tried it, and it seems to be working fine with bottlepy.
Overall, change your send() function as follows:
function send() {
var file = document.getElementById("fileInput").files[0]
console.log(file)
var url = "http://localhost:8080/solve";
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
var formData = new FormData();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
formData.append("upload", file);
xhr.send(formData);
}

Html code in body executes after script runs

I'm new in Javascript and i'm trying to make an http request to fetch some data and display the results in html. I'm fetching the results and update the html code, but then the html code inside body reloads and shows the default values. My code is,
<head>
<script>
function httpGetAsync() {
var results = new Array(3);
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
xhr.addEventListener("readystatechange", processRequest, false);
xhr.onreadystatechange = processRequest;
function processRequest() {
if (xhr.readyState == 4 && xhr.status == 200) {
// populate here results array
// i change the value with the following line
document.getElementById("title_1").innerText = "fetched_value";
}
}
}
</script>
</head>
<body>
<div class="search_btn">
<form id="search_form" method="get" onSubmit="return httpGetAsync()">
<input type="text" class="search" placeholder="Search" id="search">
<input type="submit" value="search" class="search_button">
</form>
</div>
<div id="one">
<p id="title_1">default</p>
</div>
</body>
The 'title_1' changes its text to 'fetched_value' but it then reloads and becomes 'default' again. What am i doing wrong?
It's because your onSubmit does not receive false. Simply add return false to httpGetAsync end
function httpGetAsync() {
var results = new Array(3);
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
xhr.addEventListener(
"readystatechange",
function processRequest() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("title_1").innerText = "fetched_value";
}
},
false);
xhr.onreadystatechange = processRequest;
return false;
}
You need to prevent the default action on submit, which is to use the "action" attribute on the form element to reload the page (if it's not present the current page is reloaded).
function httpGetAsync(event) {
event.preventDefault();
...
}

Categories

Resources