Merge pull request #80 from bknd-io/fix/api-and-media

fix/api-and-media

app/src/ui/components/form/json-schema-form/Form.tsx

@@ -225,12 +225,12 @@ export function FormContextOverride({
    // especially useful for AnyOf, since it doesn't need to fully validate (e.g. pattern)
    if (prefix) {
       additional.root = prefix;
-      additional.setValue = (pointer: string, value: any) => {
-         ctx.setValue(prefixPointer(pointer, prefix), value);
-      };
-      additional.deleteValue = (pointer: string) => {
-         ctx.deleteValue(prefixPointer(pointer, prefix));
+      /*additional.setValue = (path: string, value: any) => {
+         ctx.setValue(prefixPath(path, prefix), value);
       };
+      additional.deleteValue = (path: string) => {
+         ctx.deleteValue(prefixPath(path, prefix));
+      };*/
    }
 
    const context = {

app/src/ui/elements/media/Dropzone.tsx

@@ -58,6 +58,15 @@ export type DropzoneProps = {
    children?: (props: DropzoneRenderProps) => JSX.Element;
 };
 
+function handleUploadError(e: unknown) {
+   if (e && e instanceof XMLHttpRequest) {
+      const res = JSON.parse(e.responseText) as any;
+      alert(`Upload failed with code ${e.status}: ${res.error}`);
+   } else {
+      alert("Upload failed");
+   }
+}
+
 export function Dropzone({
    getUploadInfo,
    handleDelete,
@@ -164,7 +173,11 @@ export function Dropzone({
                return;
             } else {
                for (const file of pendingFiles) {
-                  await uploadFileProgress(file);
+                  try {
+                     await uploadFileProgress(file);
+                  } catch (e) {
+                     handleUploadError(e);
+                  }
                }
                setUploading(false);
                onUploaded?.(files);
@@ -226,8 +239,6 @@ export function Dropzone({
          const uploadInfo = getUploadInfo(file.body);
          console.log("dropzone:uploadInfo", uploadInfo);
          const { url, headers, method = "POST" } = uploadInfo;
-         const formData = new FormData();
-         formData.append("file", file.body);
 
          const xhr = new XMLHttpRequest();
          console.log("xhr:url", url);
@@ -260,7 +271,7 @@ export function Dropzone({
 
          xhr.onload = () => {
             console.log("onload", file.path, xhr.status);
-            if (xhr.status === 200) {
+            if (xhr.status >= 200 && xhr.status < 300) {
                //setFileState(file.path, "uploaded", 1);
                console.log("Upload complete");
 
@@ -281,8 +292,8 @@ export function Dropzone({
                resolve();
             } else {
                setFileState(file.path, "failed", 1);
-               console.error("Upload failed with status: ", xhr.status);
-               reject();
+               console.error("Upload failed with status: ", xhr.status, xhr.statusText);
+               reject(xhr);
             }
          };
 
@@ -295,7 +306,7 @@ export function Dropzone({
          };
 
          xhr.setRequestHeader("Accept", "application/json");
-         xhr.send(formData);
+         xhr.send(file.body);
       });
    }
 
@@ -366,6 +377,14 @@ const DropzoneInner = ({
       <UploadPlaceholder onClick={openFileInput} text={placeholder?.text} />
    );
 
+   async function uploadHandler(file: FileState) {
+      try {
+         return await uploadFile(file);
+      } catch (e) {
+         handleUploadError(e);
+      }
+   }
+
    return (
       <div
          ref={wrapperRef}
@@ -385,7 +404,7 @@ const DropzoneInner = ({
                   <Preview
                      key={file.path}
                      file={file}
-                     handleUpload={uploadFile}
+                     handleUpload={uploadHandler}
                      handleDelete={deleteFile}
                   />
                ))}
@@ -452,6 +471,7 @@ const Preview: React.FC<PreviewProps> = ({ file, handleUpload, handleDelete }) =
       <div
          className={twMerge(
             "w-[49%] md:w-60 flex flex-col border border-muted relative",
+            file.state === "failed" && "border-red-500 bg-red-200/20",
             file.state === "deleting" && "opacity-70"
          )}
       >

app/src/ui/routes/test/tests/json-schema-form3.tsx

@@ -46,7 +46,7 @@ export default function JsonSchemaForm3() {
    return (
       <Scrollable>
          <div className="flex flex-col p-3">
-            <Form
+            {/*<Form
                onChange={(data) => console.log("change", data)}
                onSubmit={(data) => console.log("submit", data)}
                schema={{
@@ -68,7 +68,7 @@ export default function JsonSchemaForm3() {
                className="flex flex-col gap-3"
                validateOn="change"
                options={{ debug: true }}
-            />
+            />*/}
 
             {/*<Form
                schema={{
@@ -249,12 +249,13 @@ export default function JsonSchemaForm3() {
             </Form>*/}
 
             {/*<CustomMediaForm />*/}
-            {/*<Form
+            <Form
                schema={schema.media}
                initialValues={config.media as any}
                onSubmit={console.log}
-               validateOn="change"
-            />*/}
+               options={{ debug: true }}
+               /*validateOn="change"*/
+            />
 
             {/*<Form
                schema={removeKeyRecursively(schema.media, "pattern") as any}