Skip to content

Instantly share code, notes, and snippets.

@matias220510

matias220510/UploadImage-2.js

Last active August 20, 2020 11:09
Download ZIP

Revisions

  1. matias220510 revised this gist Aug 20, 2020. 1 changed file with 70 additions and 16 deletions.
    86 changes: 70 additions & 16 deletions UploadImage-2.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,62 @@
    import React from "react";
    import styled from "styled-components";

    const FormContainer = styled.div`
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background: #642b73; /* fallback for old browsers */
    background: -webkit-linear-gradient(
    to right,
    #c6426e,
    #642b73
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
    to right,
    #c6426e,
    #642b73
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    .imageContainer {
    display: flex;
    align-items: center;
    img {
    border-radius: 20px;
    margin: 20px;
    }
    }
    `;

    const FormElement = styled.form`
    width: 380px;
    background: #ff6f61;
    border-radius: 6px;
    box-shadow: 0 4px 24px -2px rgba(18, 22, 33, 0.1);
    position: relative;
    fieldset {
    border: none;
    }
    .uploadInput {
    cursor: pointer;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    padding: 11px 20px;
    border: none;
    }
    `;

    const UploadImage = () => {
    const handleOnChange = async ({ target }) => {
    const { files } = target;
    const data = new FormData();
    data.append("file", files[0]);
    data.append("upload_preset", "upload_test");
    data.append("upload_preset", "cloudinary_test");

    const res = await fetch(
    "https://api.cloudinary.com/v1_1/duec6t3rs/image/upload",
    @@ -14,26 +65,29 @@ const UploadImage = () => {
    body: data,
    }
    );
    const { secure_url, eager } = await res.json();

    console.log(secure_url, eager);
    console.log(res);
    };

    return (
    <div>
    <fieldset>
    <label htmlFor="file">
    <input
    type="file"
    id="file"
    className="uploadInput"
    name="file"
    placeholder="Upload an image"
    required
    onChange={handleOnChange}
    />
    </label>
    </fieldset>
    <FormContainer>
    <FormElement>
    <fieldset>
    <label htmlFor="file">
    <input
    type="file"
    id="file"
    className="uploadInput"
    name="file"
    placeholder="Upload an image"
    required
    onChange={handleOnChange}
    />
    </label>
    </fieldset>
    </FormElement>
    </FormContainer>
    </div>
    );
    };
  2. matias220510 revised this gist Aug 20, 2020. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion UploadImage-2.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    import React, { useState } from "react";
    import React from "react";

    const UploadImage = () => {
    const handleOnChange = async ({ target }) => {
  3. matias220510 created this gist Aug 18, 2020.
    41 changes: 41 additions & 0 deletions UploadImage-2.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    import React, { useState } from "react";

    const UploadImage = () => {
    const handleOnChange = async ({ target }) => {
    const { files } = target;
    const data = new FormData();
    data.append("file", files[0]);
    data.append("upload_preset", "upload_test");

    const res = await fetch(
    "https://api.cloudinary.com/v1_1/duec6t3rs/image/upload",
    {
    method: "POST",
    body: data,
    }
    );
    const { secure_url, eager } = await res.json();

    console.log(secure_url, eager);
    };

    return (
    <div>
    <fieldset>
    <label htmlFor="file">
    <input
    type="file"
    id="file"
    className="uploadInput"
    name="file"
    placeholder="Upload an image"
    required
    onChange={handleOnChange}
    />
    </label>
    </fieldset>
    </div>
    );
    };

    export default UploadImage;