Search by image is working

metmuseum · May 31, 2024 · d4aaca1 · d4aaca1
1 parent 4be4964
commit d4aaca1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 31 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -308,7 +308,7 @@ const App = () => {
 							onChange={handleSearch}
 						/>
 						<span>or</span>
-						<ImageInput />
+						<ImageInput handleNewActiveObject={handleNewActiveObject} />
 					</div>
 					{errorMessage ?
 						<div>

diff --git a/src/components/image-input/index.jsx b/src/components/image-input/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
-import App from '../../App'
+import PropTypes from 'prop-types';
 
-const ImageInput = () => {
+const ImageInput = ({ handleNewActiveObject }) => {
 	const defaultButtonText = '📸';
 	const [imageInputText, setImageInputText] = useState(defaultButtonText);
 
@@ -47,32 +47,22 @@ const ImageInput = () => {
 	};
 
 	const postBlob = async blob => {
-		console.log("Posting")
-		// const formData = new FormData();
-		// formData.append('image', blob, 'photo.png');
-
-		const request = await fetch(AZURE_API_IMAGE, {
-			method: 'POST',
-			body: blob,
-			headers: {
-				"Content-type": "application/octet-stream"
+		console.log("Uploading file...");
+		const request = new XMLHttpRequest();
+		const formData = new FormData();
+
+		request.open("POST", AZURE_API_IMAGE, true);
+		request.onreadystatechange = () => {
+			if (request.readyState === 4 && request.status === 200) {
+				const similarImages = JSON.parse(request.response)?.similarImages;
+				console.log(similarImages[0]);
+				// handleSearch(similarImages[0]);
+				setImageInputText('📸')
+				handleNewActiveObject(similarImages[0].objectId);
 			}
-		})
-		console.log(request)
-		const response = await request.json();
-		if (response.objectIDs) {
-			App.setErrorMessage(null);
-			const newObject = response.objectIDs[0];
-			App.handleNewActiveObject(newObject);
-		// new Azure version
-		} else if (response.similarImages) {
-			App.setErrorMessage(null);
-			// could randomize?
-			const index = Math.floor(Math.random()*response.similarImages.length)
-			const newObject = response.similarImages[index].objectId;
-			App.handleNewActiveObject(newObject);
-		}
-
+		};
+		formData.append("file", blob);
+		request.send(formData)
 	}
 
 	const handleOnChange = e => {
@@ -102,7 +92,7 @@ const ImageInput = () => {
 	);
 };
 
-// ImageInput.propTypes = {
-// 	searchObjects: PropTypes.func
-// };
+ImageInput.propTypes = {
+	handleNewActiveObject: PropTypes.func
+};
 export default ImageInput;