fkc

api/upload.py

@@ -60,20 +60,23 @@ def upload_storj(filecontent, filename, bucket_name):
 def upload():
     # check if the post request has the file part
     if 'file' not in request.files:
-        return json({'error': 'No file part'}, status=400)
+        return {'error': 'No file part'}, 400
     file = request.files.get('file')
-    # if user does not select file, browser also
-    # submit a empty part without filename
-    if file.name == '':
-        return json({'error': 'No selected file'}, status=400)
     if file:
         # save the file
         filename = secure_filename(file.name)
-        # Save the file to a temporary location
-        with tempfile.TemporaryDirectory() as temp_dir:
-            temp_path = os.path.join(temp_dir, filename)
-            file.save(temp_path)
-            # Open the file in binary mode
-            with open(temp_path, 'rb') as filecontent:
-                result = upload_storj(filecontent, filename, 'discoursio')
-    return json({'message': 'File uploaded'}, status=200)
+        # if user does not select file, browser also
+        # submit a empty part without filename
+        if file.name == '':
+            return {'error': 'No selected file'}, 400
+        else:
+          # Save the file to a temporary location
+          with tempfile.TemporaryDirectory() as temp_dir:
+              temp_path = os.path.join(temp_dir, filename)
+              file.save(temp_path)
+              # Open the file in binary mode
+              with open(temp_path, 'rb') as filecontent:
+                  result = upload_storj(filecontent, filename, 'discoursio')
+    else:
+        return {'error': 'No selected file'}, 400
+    return {'message': 'File uploaded', 'result': jsonify(result)}, 200

src/components/Pages/profile/ProfileSettingsPage.tsx

@@ -27,30 +27,32 @@ export const ProfileSettingsPage = (props: PageProps) => {
     submit(form)
   }
   let userpicFile: HTMLInputElement
-  const handleUserpicUpload = async (ev) => {
-    // TODO: show progress
+  const handleFileUpload = async (file: File) => {
     try {
-      console.debug('handleUserpicUpload trigger')
-      const f = ev.target.files[0]
-      if (f) {
-        const reader = new FileReader()
-        reader.onloadend = () => {
-          f.fileData = reader.result
-          const body = new FormData()
-          body.append('file', f)
-          fetch('/api/upload', {
-            method: 'POST',
-            body
-          }).then((resp) => {
-            resp.json().then((url) => updateFormField('file', url))
-          })
+      const formData = new FormData()
+      formData.append('file', file)
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data; boundary=discoursiofile'
         }
-        reader.readAsDataURL(f)
-      }
+      })
+      console.debug(response)
     } catch (error) {
       console.error('[upload] error', error)
     }
   }
+  const handleUserpicUpload = async (ev) => {
+    // TODO: show progress
+    try {
+      const f = ev.target.files[0]
+      if (f) handleFileUpload(f)
+    } catch (error) {
+      console.error('[upload] error', error)
+    }
+  }
+
   const [hostname, setHostname] = createSignal('new.discours.io')
   onMount(() => setHostname(window?.location.host))