Archived
92 lines
3.0 KiB
JavaScript
92 lines
3.0 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import { useHistory, useParams } from "react-router-dom";
|
|
import { postImages, getImages } from "./HomeManager";
|
|
|
|
export const Home = () => {
|
|
const homeImages = useState([]);
|
|
const { id } = useParams();
|
|
const history = useHistory();
|
|
const [businessImages, setbusinessImages] = useState([]);
|
|
const [image, setImage] = useState({
|
|
album_id: 0,
|
|
picture: "",
|
|
});
|
|
const [file_name, setfile_Name] = useState("");
|
|
const image1URL =
|
|
"http://localhost:8000/media/smugimages/20140612-_JMR1361.jpg-5bbe21e5-19b0-4aae-b238-5c8791bc0b96.jpeg";
|
|
const image2URL =
|
|
"http://localhost:8000/media/smugimages/20141224-_JMR5400.jpg-b7c8b0a6-33dc-4cd3-902b-a18538eb2283.jpeg";
|
|
const image3URL =
|
|
"http://localhost:8000/media/smugimages/20140609-_JMR1159.jpg-fbcfa699-9136-4cb0-8e0a-a36694554af7.jpeg";
|
|
|
|
useEffect(() => {
|
|
getImages().then((data) => setbusinessImages(data));
|
|
}, []);
|
|
|
|
const getBase64 = (file, callback) => {
|
|
const reader = new FileReader();
|
|
reader.addEventListener("load", () => callback(reader.result));
|
|
reader.readAsDataURL(file);
|
|
};
|
|
|
|
const createImageString = (event) => {
|
|
let imageCopy = { ...image };
|
|
getBase64(event.target.files[0], (base64ImageString) => {
|
|
imageCopy.picture = base64ImageString;
|
|
setfile_Name(event.target.files[0].name);
|
|
setImage(imageCopy);
|
|
console.log("Base64 of file is", base64ImageString);
|
|
|
|
// Update a component state variable to the value of base64ImageString
|
|
});
|
|
};
|
|
|
|
const resetFileNameOnUpload = (default_text) => {
|
|
let def_text = document.getElementById("image_upload");
|
|
def_text.files[0].name = default_text;
|
|
};
|
|
const defaultImageState = {
|
|
album_id: 0,
|
|
picture: "",
|
|
};
|
|
|
|
// this code meant to randomize the display images. First concentrate on getting your images to display. Then worry about limiting them and randomization.
|
|
// const randomizeDisplayImages = () => {
|
|
// let count = 0
|
|
// do (
|
|
// for pic of businessImages
|
|
// )
|
|
// while count <= 3
|
|
|
|
// }
|
|
|
|
return (
|
|
<>
|
|
<h1>SmugFolio</h1>
|
|
<input
|
|
label="Browse for image file to upload"
|
|
type="file"
|
|
id="image_upload"
|
|
onChange={createImageString}
|
|
/>
|
|
<input type="hidden" name="image_id" value={image.id} />
|
|
<button
|
|
onClick={() => {
|
|
postImages(image, file_name).then((image) =>
|
|
history.push(`/SelectTags/${image.id}`),
|
|
);
|
|
// code to rename the browse label. This is not working but should be done after other views are complete .then(setfile_Name("").then(resetFileNameOnUpload("No file chosen"))
|
|
// Upload the stringified image that is stored in state
|
|
}}
|
|
>
|
|
Upload
|
|
</button>
|
|
<div>
|
|
<img src={image1URL} width={616} height={408}></img>
|
|
<img src={image2URL} width={616} height={408}></img>
|
|
<img src={image3URL} width={616} height={408}></img>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|