Use PUT API for uploading

res/include/md/api.md

@@ -1,4 +1,8 @@
-# Pixeldrain API documentation
+# API documentation
+
+Methods for using pixeldrain programmatically.
+
+## Authentication
 
 The methods for uploading and retrieving files don't require an API key. The
 methods for creating and retrieving lists also don't require an API key. All
@@ -37,6 +41,22 @@ The path is to be appended to the API URL, so "/file/someid/thumbnail" becomes
 The base URL for the API is "{{apiUrl}}", all paths below are relative to that
 URL.
 
+## curl example
+
+Here's how to anonymously upload a file using curl:
+
+```
+curl -T "file_name.txt" https://pixeldrain.com/api/file/
+```
+
+You can also upload a file to your pixeldrain account using curl. Get an API key
+from the [API keys page](/user/api_keys) and enter it in the command. Replace
+the example API key here with your own:
+
+```
+curl -T "file_name.txt" -u :5f45f184-64bb-4eaa-be19-4a5f0459db49 https://pixeldrain.com/api/file/
+```
+
 ## Form value order
 
 I recommend you put files at the end of every file upload form. By doing this

res/include/md/api_file.md

@@ -6,7 +6,8 @@
 
 ### Description
 
-Upload a file.
+Upload a file. I recommend that you use the PUT API instead of the POST API.
+It's easier to use.
 
 ### Parameters
 
@@ -73,6 +74,78 @@ HTTP 413: Payload Too Large
 </div>
 </details>
 
+<details class="request_put">
+<summary><span class="method">PUT</span>/file/{name}</summary>
+<div>
+
+### Description
+
+Upload a file.
+
+### Parameters
+
+Param     | Type    | Required | Location      | Maximum Size                 | Default | Description
+----------|---------|----------|---------------|------------------------------|---------|-----------------------------------
+name      | string  | true     | URL           | 255 characters               | none    | Name of the file to upload
+anonymous | boolean | false    | URL parameter | N/A                          | false   | File is not linked to user if true
+file      | file    | true     | request body  | Depends on user subscription | none    | File to upload
+
+### Returns
+
+HTTP 200: OK
+```
+{
+	"id": "abc123" // ID of the newly uploaded file
+}
+```
+
+HTTP 422: Unprocessable Entity
+```
+{
+	"success": false,
+	"value": "no_file",
+	"message": "The file does not exist or is empty."
+}
+```
+
+HTTP 500: Internal Server Error
+```
+{
+	"success": false,
+	"value": "internal",
+	"message": "An internal server error occurred."
+}
+```
+
+HTTP 413: Payload Too Large
+```
+{
+	"success": false,
+	"value": "file_too_large",
+	"message": "The file you tried to upload is too large"
+}
+```
+
+HTTP 500: Internal Server Error
+```
+{
+	"success": false,
+	"value": "writing",
+	"message": "Something went wrong while writing the file to disk, the server may be out of storage space."
+}
+```
+
+HTTP 413: Payload Too Large
+```
+{
+	"success": false,
+	"value": "name_too_long",
+	"message": "File Name is too long, Max 255 characters allowed."
+}
+```
+</div>
+</details>
+
 <details class="api_doc_details request_get">
 <summary><span class="method">GET</span>/file/{id}</summary>
 <div>

svelte/src/home_page/UploadProgressBar.svelte

@@ -94,11 +94,8 @@ export const start = () => {
 		stats_interval = setInterval(on_progress, stats_interval_ms)
 	}
 
-	let form = new FormData();
-	form.append('file', job.file, job.name);
-
 	let xhr = new XMLHttpRequest();
-	xhr.open("POST", window.api_endpoint+"/file", true);
+	xhr.open("PUT", window.api_endpoint+"/file/"+encodeURIComponent(job.name), true);
 	xhr.timeout = 86400000; // 24 hours, to account for slow connections
 
 	xhr.upload.addEventListener("progress", evt => {
@@ -142,6 +139,8 @@ export const start = () => {
 				tries++
 				setTimeout(start, 5000)
 			}
+		} else if (xhr.status === 0) {
+			on_failure("request_failed", "Your request did not arrive, or the server blocked the request")
 		} else {
 			// Request did not arrive
 			if (tries < 3) {
@@ -155,7 +154,7 @@ export const start = () => {
 		}
 	};
 
-	xhr.send(form);
+	xhr.send(job.file);
 }
 
 const add_upload_history = id => {