admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enable video upload. IO-524

Browse Source
This commit is contained in:
Patrick Fic
2021-02-03 17:43:41 -08:00
parent 772259f495
commit dcd9cfc331
2 changed files with 64 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/components/documents-upload/documents-upload.utility.js
View File

@@ -1,9 +1,9 @@
import { notification } from "antd";
import axios from "axios";
import i18n from "i18next";
import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
import { axiosAuthInterceptorId } from "../../utils/CleanAxios";
import client from "../../utils/GraphQLClient";
//Context: currentUserEmail, bodyshop, jobid, invoiceid
@@ -51,12 +51,16 @@ export const uploadToCloudinary = async (
// let eager = process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS;
//Get the signed url.
console.log("fileType", fileType);
const upload_preset = fileType.startsWith("video")
? "incoming_upload_video"
: "incoming_upload";
const signedURLResponse = await axios.post("/media/sign", {
public_id: public_id,
tags: tags,
timestamp: timestamp,
upload_preset: "incoming_upload",
upload_preset: upload_preset,
});
if (signedURLResponse.status !== 200) {
@@ -80,8 +84,8 @@ export const uploadToCloudinary = async (
};
const formData = new FormData();
formData.append("file", file);
console.log("Applying lower quality transforms.");
formData.append("upload_preset", "incoming_upload");
formData.append("upload_preset", upload_preset);
formData.append("api_key", process.env.REACT_APP_CLOUDINARY_API_KEY);
formData.append("public_id", public_id);
@@ -146,7 +150,7 @@ export const uploadToCloudinary = async (
if (!!onError) onError(JSON.stringify(documentInsert.errors));
notification["error"]({
message: i18n.t("documents.errors.insert", {
message: JSON.stringify(JSON.stringify(documentInsert.errors)),
message: JSON.stringify(documentInsert.errors),
}),
});
return;

100
client/src/components/jobs-documents-gallery/jobs-documents-gallery.component.jsx
View File

@@ -16,13 +16,25 @@ function JobsDocumentsComponent({
}) {
const [galleryImages, setgalleryImages] = useState({ images: [], other: [] });
const { t } = useTranslation();
useEffect(() => {
let documents = data.reduce(
(acc, value) => {
console.log("value", value);
if (value.type.includes("image")) {
acc.images.push({
src: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${value.key}`,
thumbnail: `${process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${value.key}`,
src: `${
value.type.startsWith("video")
? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
: process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
}/${value.key}`,
thumbnail: `${
value.type.startsWith("video")
? process.env.REACT_APP_CLOUDINARY_VIDEO_ENDPOINT
: process.env.REACT_APP_CLOUDINARY_IMAGE_ENDPOINT
}/${process.env.REACT_APP_CLOUDINARY_THUMB_TRANSFORMATIONS}/${
value.key
}`,
thumbnailHeight: 225,
thumbnailWidth: 225,
isSelected: false,
@@ -81,62 +93,60 @@ function JobsDocumentsComponent({
</div>
<div style={{ marginTop: "2rem" }}>
<Card title={t("jobs.labels.documents-images")}>
<Gallery
images={galleryImages.images}
backdropClosesModal={true}
onClickImage={(props) => {
window.open(
props.target.src,
"_blank",
"toolbar=0,location=0,menubar=0"
);
}}
onSelectImage={(index, image) => {
setgalleryImages({
...galleryImages,
images: galleryImages.images.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
),
});
}}
/>
<DocumentsUploadComponent
jobId={jobId}
billId={billId}
callbackAfterUpload={billsCallback || refetch}
tagsArray={["test"]}
>
<Gallery
images={galleryImages.images}
backdropClosesModal={true}
onClickImage={(props) => {
window.open(
props.target.src,
"_blank",
"toolbar=0,location=0,menubar=0"
);
}}
onSelectImage={(index, image) => {
setgalleryImages({
...galleryImages,
images: galleryImages.images.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
),
});
}}
/>
</DocumentsUploadComponent>
></DocumentsUploadComponent>
</Card>
<Card title={t("jobs.labels.documents-other")}>
<Gallery
images={galleryImages.other}
backdropClosesModal={true}
enableLightbox={false}
onClickThumbnail={(index) => {
window.open(
galleryImages.other[index].src,
"_blank",
"toolbar=0,location=0,menubar=0"
);
}}
onSelectImage={(index) => {
setgalleryImages({
...galleryImages,
other: galleryImages.other.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
),
});
}}
/>
<DocumentsUploadComponent
jobId={jobId}
billId={billId}
callbackAfterUpload={billsCallback || refetch}
tagsArray={["test"]}
>
<Gallery
images={galleryImages.other}
backdropClosesModal={true}
enableLightbox={false}
onClickThumbnail={(index) => {
window.open(
galleryImages.other[index].src,
"_blank",
"toolbar=0,location=0,menubar=0"
);
}}
onSelectImage={(index) => {
setgalleryImages({
...galleryImages,
other: galleryImages.other.map((g, idx) =>
index === idx ? { ...g, isSelected: !g.isSelected } : g
),
});
}}
/>
</DocumentsUploadComponent>
></DocumentsUploadComponent>
</Card>
</div>
</div>