Turn off upload debugging

src/app/(auth-state)/admin/photos/page.tsx

@@ -53,7 +53,7 @@ export default async function AdminTagsPage({
     <SiteGrid
       contentMain={
         <div className="space-y-8">
-          <PhotoUpload shouldResize={true} debug />
+          <PhotoUpload shouldResize={true} />
           {blobPhotoUrls.length > 0 &&
             <div className={cc(
               'border-b pb-6',

src/app/(auth-state)/admin/uploads/blob/route.tsx

@@ -1,8 +1,6 @@
 import { revalidatePhotosAndBlobKeys } from '@/cache';
-import {
-  ACCEPTED_PHOTO_FILE_TYPES,
-  isUploadPathnameValid,
-} from '@/services/blob';
+import { ACCEPTED_PHOTO_FILE_TYPES } from '@/photo';
+import { isUploadPathnameValid } from '@/services/blob';
 import { handleUpload, type HandleUploadBody } from '@vercel/blob/client';
 import { NextResponse } from 'next/server';
 

src/components/ImageInput.tsx

@@ -5,15 +5,15 @@ import { useRef, useState } from 'react';
 import { CopyExif } from '@/lib/CopyExif';
 import { cc } from '@/utility/css';
 import { AiOutlineCloudUpload } from 'react-icons/ai';
-import { ACCEPTED_PHOTO_FILE_TYPES } from '@/services/blob';
 import Spinner from './Spinner';
+import { ACCEPTED_PHOTO_FILE_TYPES } from '@/photo';
 
 const INPUT_ID = 'file';
 
 export default function ImageInput({
   onBlobReady,
   maxSize,
-  quality = 0.9,
+  quality = 0.8,
   loading,
   debug,
 }: {
@@ -64,7 +64,7 @@ export default function ImageInput({
             onChange={async e => {
               const file = e.currentTarget.files?.[0];
               setFileName(file?.name);
-              const extension = file?.name.split('.').pop();
+              const extension = file?.name.split('.').pop()?.toLowerCase();
               const canvas = ref.current;
               if (file) {
                 if (!maxSize) {
@@ -103,10 +103,10 @@ export default function ImageInput({
                   canvas.toBlob(
                     async blob => {
                       if (blob) {
-                        onBlobReady(
-                          await CopyExif(file, blob, imageType),
-                          extension,
-                        );
+                        // await sleep();
+                        const newBlob = await CopyExif(file, blob, imageType);
+                        // await sleep();
+                        onBlobReady(newBlob, extension);
                       }
                     },
                     imageType,

src/lib/ExifRestorer.ts

@@ -1,178 +0,0 @@
-/* eslint-disable max-len */
-//Based on MinifyJpeg
-//http://elicon.blog57.fc2.com/blog-entry-206.html
-
-export const ExifRestorer = (function () {
-  const ExifRestorer: {
-    KEY_STR: string;
-    encode64: (input: Uint8Array) => string;
-    restore: (origFileBase64: string, resizedFileBase64: string) => string;
-    exifManipulation: (resizedFileBase64: string, segments: any[]) => Uint8Array;
-    getExifArray: (segments: any[]) => any[];
-    insertExif: (resizedFileBase64: string, exifArray: any[]) => any[];
-    slice2Segments: (rawImageArray: any[]) => any[];
-    decode64: (input: string) => any[];
-  } = {} as any;
-
-  ExifRestorer.KEY_STR =
-    'ABCDEFGHIJKLMNOP' +
-    'QRSTUVWXYZabcdef' +
-    'ghijklmnopqrstuv' +
-    'wxyz0123456789+/' +
-    '=';
-
-  ExifRestorer.encode64 = function (input) {
-    let output: any = '',
-      chr1: any, chr2: any, chr3: any = '',
-      enc1: any, enc2: any, enc3: any, enc4: any = '',
-      i = 0;
-
-    do {
-      chr1 = input[i++];
-      chr2 = input[i++];
-      chr3 = input[i++];
-
-      enc1 = chr1 >> 2;
-      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
-      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
-      enc4 = chr3 & 63;
-
-      if (isNaN(chr2)) {
-        enc3 = enc4 = 64;
-      } else if (isNaN(chr3)) {
-        enc4 = 64;
-      }
-
-      output = output +
-        this.KEY_STR.charAt(enc1) +
-        this.KEY_STR.charAt(enc2) +
-        this.KEY_STR.charAt(enc3) +
-        this.KEY_STR.charAt(enc4);
-      chr1 = chr2 = chr3 = '';
-      enc1 = enc2 = enc3 = enc4 = '';
-    } while (i < input.length);
-
-    return output;
-  };
-
-  ExifRestorer.restore = function (origFileBase64, resizedFileBase64) {
-    if (!origFileBase64.match('data:image/jpeg;base64,')) {
-      return resizedFileBase64;
-    }
-
-    var rawImage = this.decode64(origFileBase64.replace('data:image/jpeg;base64,', ''));
-    var segments = this.slice2Segments(rawImage);
-
-    var image = this.exifManipulation(resizedFileBase64, segments);
-
-    return this.encode64(image);
-  };
-
-
-  ExifRestorer.exifManipulation = function (resizedFileBase64, segments) {
-    var exifArray = this.getExifArray(segments),
-      newImageArray = this.insertExif(resizedFileBase64, exifArray),
-      aBuffer = new Uint8Array(newImageArray);
-
-    return aBuffer;
-  };
-
-
-  ExifRestorer.getExifArray = function (segments) {
-    var seg;
-    for (var x = 0; x < segments.length; x++) {
-      seg = segments[x];
-      if (seg[0] == 255 && seg[1] == 225) //(ff e1)
-      {
-        return seg;
-      }
-    }
-    return [];
-  };
-
-
-  ExifRestorer.insertExif = function (resizedFileBase64, exifArray) {
-    var imageData = resizedFileBase64.replace('data:image/jpeg;base64,', ''),
-      buf = this.decode64(imageData),
-      separatePoint = buf.indexOf(255, 3),
-      mae = buf.slice(0, separatePoint),
-      ato = buf.slice(separatePoint),
-      array = mae;
-
-    array = array.concat(exifArray);
-    array = array.concat(ato);
-    return array;
-  };
-
-
-
-  ExifRestorer.slice2Segments = function (rawImageArray) {
-    var head = 0,
-      segments = [];
-
-    while (1) {
-      if (rawImageArray[head] == 255 && rawImageArray[head + 1] == 218) { break; }
-      if (rawImageArray[head] == 255 && rawImageArray[head + 1] == 216) {
-        head += 2;
-      }
-      else {
-        var length = rawImageArray[head + 2] * 256 + rawImageArray[head + 3],
-          endPoint = head + length + 2,
-          seg = rawImageArray.slice(head, endPoint);
-        segments.push(seg);
-        head = endPoint;
-      }
-      if (head > rawImageArray.length) { break; }
-    }
-
-    return segments;
-  };
-
-
-
-  ExifRestorer.decode64 = function (input) {
-    let
-      chr1: any, chr2: any, chr3: any = '',
-      enc1: any, enc2: any, enc3: any, enc4: any = '',
-      i = 0,
-      buf = [];
-
-    // remove all characters that are not A-Z, a-z, 0-9, +, /, or =
-    var base64test = /[^A-Za-z0-9\+\/\=]/g;
-    if (base64test.exec(input)) {
-      alert('There were invalid base64 characters in the input text.\n' +
-        'Valid base64 characters are A-Z, a-z, 0-9, \'+\', \'/\',and \'=\'\n' +
-        'Expect errors in decoding.');
-    }
-    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, '');
-
-    do {
-      enc1 = this.KEY_STR.indexOf(input.charAt(i++));
-      enc2 = this.KEY_STR.indexOf(input.charAt(i++));
-      enc3 = this.KEY_STR.indexOf(input.charAt(i++));
-      enc4 = this.KEY_STR.indexOf(input.charAt(i++));
-
-      chr1 = (enc1 << 2) | (enc2 >> 4);
-      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
-      chr3 = ((enc3 & 3) << 6) | enc4;
-
-      buf.push(chr1);
-
-      if (enc3 != 64) {
-        buf.push(chr2);
-      }
-      if (enc4 != 64) {
-        buf.push(chr3);
-      }
-
-      chr1 = chr2 = chr3 = '';
-      enc1 = enc2 = enc3 = enc4 = '';
-
-    } while (i < input.length);
-
-    return buf;
-  };
-
-
-  return ExifRestorer;
-})();

src/photo/PhotoUpload.tsx

@@ -31,14 +31,14 @@ export default function PhotoUpload({
             maxSize={shouldResize ? MAX_IMAGE_SIZE : undefined}
             loading={isUploading}
             onBlobReady={(blob, extension) => {
-              setIsUploading(true);
-              setUploadError('');
               if (debug) {
                 setDebugDownload({
                   href: URL.createObjectURL(blob),
                   fileName: `debug.${extension}`,
                 });
               } else {
+                setIsUploading(true);
+                setUploadError('');
                 uploadPhotoFromClient(
                   blob,
                   extension,
@@ -60,7 +60,7 @@ export default function PhotoUpload({
           />
         </form>
       </div>
-      {debugDownload &&
+      {debug && debugDownload &&
         <a
           className="block"
           href={debugDownload.href}

src/photo/index.ts

@@ -12,6 +12,11 @@ import type { Metadata } from 'next';
 
 export const GRID_THUMBNAILS_TO_SHOW_MAX = 12;
 
+export const ACCEPTED_PHOTO_FILE_TYPES = [
+  'image/jpg',
+  'image/jpeg',
+];
+
 // Core EXIF data
 export interface PhotoExif {
   aspectRatio: number

src/services/blob.ts

@@ -12,12 +12,6 @@ export const BLOB_BASE_URL =
 const PREFIX_UPLOAD = 'upload';
 const PREFIX_PHOTO = 'photo';
 
-export const ACCEPTED_PHOTO_FILE_TYPES = [
-  'image/jpg',
-  'image/jpeg',
-  'image/png',
-];
-
 const REGEX_UPLOAD_PATH = new RegExp(
   `(?:${PREFIX_UPLOAD})\.[a-z]{1,4}`,
   'i',

src/utility/promise.ts

@@ -0,0 +1,7 @@
+export const sleep = async (delay = 1000) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('Ready');
+    }, delay);
+  });
+};