Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image uploader module #361

Merged
merged 10 commits into from
Jun 11, 2024
Merged

Image uploader module #361

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
73dafbe
test-btn-fix
Eren-Yeaager May 21, 2024
4ddf398
toggle gateway urls
Eren-Yeaager May 21, 2024
daec576
New changes in design implemented
Eren-Yeaager May 21, 2024
1796c3d
Merge branch 'develop' of https://github.com/NEARBuilders/gateway int…
Eren-Yeaager May 21, 2024
ce7cb3d
Network button implementation
Eren-Yeaager May 21, 2024
400f6c0
Login and Logout tests
Eren-Yeaager May 30, 2024
42102e1
Merge branch 'develop' of https://github.com/NEARBuilders/gateway int…
Eren-Yeaager May 30, 2024
dcc7775
Merge branch 'develop' of https://github.com/NEARBuilders/gateway int…
Eren-Yeaager Jun 6, 2024
82a6487
Image Uploader module
Eren-Yeaager Jun 7, 2024
21f996a
Implemented Files component
Eren-Yeaager Jun 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/new/widget/page/projects/Editor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -610,7 +610,7 @@ const SecondScreen = () => {
<div className="form-group mb-3">
<label className="pb-2">Avatar</label>
<Widget
src="${alias_old}/widget/components.ImageUploader"
src="${alias_old}/widget/components.UploadField"
props={{
image: avatar,
onChange: (image) => setAvatar({ image }),
Expand All @@ -620,7 +620,7 @@ const SecondScreen = () => {
<div className="form-group mb-3">
<label className="pb-2">Cover Image</label>
<Widget
src="${alias_old}/widget/components.ImageUploader"
src="${alias_old}/widget/components.UploadField"
props={{
image: coverImage,
onChange: (image) => setCoverImage({ image }),
Expand Down
4 changes: 0 additions & 4 deletions apps/old/widget/components.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,6 @@ const { Step } = VM.require("${config_account}/widget/components.Step");
const { InputField } = VM.require(
"${config_account}/widget/components.InputField",
);
const { UploadField } = VM.require(
"${config_account}/widget/components.UploadField",
);
Comment on lines -10 to -12
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why are we removing it from here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi , As hooks are unavailable for modules and I have used this
<Widget
src="${alias_old}/widget/components.UploadField"
props={{
image: avatar,
onChange: (image) => setAvatar({ image }),
}}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi , As hooks are unavailable for modules and I have used this
<Widget
src="${alias_old}/widget/components.UploadField"
props={{
image: avatar,
onChange: (image) => setAvatar({ image }),
}}

const { TextBox } = VM.require("${config_account}/widget/components.TextBox");
const { TextEditor } = VM.require(
"${config_account}/widget/components.TextEditor",
Expand Down Expand Up @@ -71,7 +68,6 @@ return {
Step,
Hashtag,
InputField,
UploadField,
TextBox,
TextEditor,
Checkbox,
Expand Down
3 changes: 1 addition & 2 deletions apps/old/widget/components/Library.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -375,8 +375,7 @@ const components = [
},
preview: (
<div className="d-flex flex-column gap-3 mb-3">
<UploadField />
<UploadField background />
<Widget src="${alias_old}/widget/components.UploadField" />
</div>
),
embedCode: `
Expand Down
100 changes: 77 additions & 23 deletions apps/old/widget/components/UploadField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,45 @@
const { Button } = VM.require("${config_account}/widget/components.Button") || {
Button: () => <></>,
const image = props.image;
const onChange = props.onChange;

State.init({
origImage: image,
img: { cid: image.ipfs_cid },
});

if (JSON.stringify(image) !== JSON.stringify(state.image)) {
State.update({
image,
});
}

let localImage = {};

if (state.origImage.ipfs_cid) {
localImage.ipfs_cid = null;
}
localImage.ipfs_cid = state.img.cid;
if (onChange && JSON.stringify(image) !== JSON.stringify(localImage)) {
onChange(localImage);
}
const debounce = (func, wait) => {
const pause = wait || 350;
let timeout;

return (args) => {
const later = () => {
clearTimeout(timeout);
func(args);
};

clearTimeout(timeout);
timeout = setTimeout(later, pause);
};
};
const onImageChange = debounce((e) => {
State.update({
[e.target.id]: e.target.value,
});
});

const UploadContainer = styled.div`
display: flex;
Expand Down Expand Up @@ -45,25 +84,40 @@ const UploadContainer = styled.div`
font-size: 2rem;
}
`;
const Button = styled.div`
.btn {
all: unset;
display: inline-flex;
padding: 10px 20px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
line-height: normal;
font-family: "Poppins", sans-serif;
transition: all 300ms;
background: var(--button-outline-bg, transparent);
color: var(--button-outline-color, #fff);
color: ${props.theme === "light" ? "black" : ""};
border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
&:hover:not(:disabled) {
background: var(--button-outline-hover-bg, rgba(255, 255, 255, 0.2));
cursor: pointer;
}
}
`;

function UploadField({ background }) {
return (
<UploadContainer background={background}>
<i class="bi bi-cloud-upload"></i>
<div className="d-flex flex-column gap-2">
<p>Choose a file or drag & drop it here.</p>
<p className="secondary">
JPEG, PNG, PDF, and MP4 formats, up to 50 MB.
</p>
</div>
<Button
variant="outline"
style={{ background: background && "var(--bg-2,#23242B)" }}
>
Browse Files
</Button>
</UploadContainer>
);
}

return { UploadField };
return (
<UploadContainer background={background}>
<i class="bi bi-cloud-upload"></i>
<div className="d-flex flex-column gap-2">
<p>Choose a file or drag & drop it here.</p>
<p className="secondary">JPEG, PNG, PDF, and MP4 formats, up to 50 MB.</p>
</div>
<Button>
<IpfsImageUpload image={state.img} />
</Button>
</UploadContainer>
);
Loading