I am trying to save an image to pixeldrain via it's API.
This is my code
<!DOCTYPE html>
<html>
<body>
<h1>Upload Image</h1>
<form action="https://pixeldrain.com/api/file"
enctype="multipart/form-data" method="post" target="_blank">
<label for="upload_file">Upload File:</label><br><br>
<input type="file" id="upload_file" name="upload_file">
<input type="submit">
</form>
</body>
</html>
I always get this error {"success":false,"value":"no_file","message":"The file does not exist or is empty"}
What am I doing wrong? After uploading, I need to get back the ID of the image back also...
This is the Documentation of Pixel Drain, but I can't understand how to do it...
Is there any jQuery or Javascript way of doing this, or am I doing something wrong?
I'm the creator of pixeldrain.
The name of the file input field needs to be "file" to work. The response you're getting is because the field name is incorrect.
If you want to use the file ID afterwards you will need to submit the form with javascript. Due to pixeldrain's cross origin policy this is not possible at the moment. I'll see what I can do to fix that.
Here's an example of uploading a file with both a HTML form and javascript (if that would work):
<form action="https://pixeldrain.com/api/file" enctype="multipart/form-data" method="post" target="_blank">
<label for="upload_file">Upload File:</label><br/>
<input type="file" id="upload_file" name="file"/>
<input type="submit" value="Submit (HTML)"/>
<button id="js_submit">Submit (Javascript)</button>
</form>
<br/>
Result:<br/>
<div id="result"></div>
<script>
document.getElementById("js_submit").addEventListener("click", e => {
e.preventDefault();
let file = document.getElementById("upload_file").files[0];
let result_div = document.getElementById("result");
let xhr = new XMLHttpRequest();
xhr.open("PUT", "https://pixeldrain.com/api/file/"+encodeURIComponent(file.name), true);
xhr.onreadystatechange = () => {
// readystate 4 means the upload is done
if (xhr.readyState !== 4) {
return;
}
if (xhr.status >= 100 && xhr.status < 400) {
// Request is a success
result_div.innerText = JSON.parse(xhr.response);
} else {
// Request failed
result_div.innerText = "Upload error. status: " + xhr.status + " response: " + xhr.response;
}
};
xhr.send(file);
})
</script>
I uploaded this example to my personal site so you can try it out: https://fornaxian.tech/upload.html