Keskustelu: Ohjelmointikysymykset: JavaScript: Miten korjata ongelma NS_BINDING_ABORTED?

public function myprofileSave(Request $request){

        $auth = Auth::user();

        $user = User::where(['id' => $auth->id])->first();
        $gender = User::where(['gender' => $auth->id])->first();
        $profile_picture_is_null = User::where(['profile_picture_path' => $auth->id])->first();
        $file = $request->file('file');

        if($file){

            $filename = uniqid() . '.' . $file->getClientOriginalExtension();

            try {
                if($user->profile_picture_path){
                    Storage::delete($user->profile_picture_path);
                }
            } catch (\Throwable $th) {
                //throw $th;
            }

            $path = $file->storeAs('public/uploads', $filename);
            // get the dimensions of the original image
            $original_image = storage_path().'/app/'.$path;
            list($width, $height) = getimagesize($original_image);

            // calculate the new dimensions
            $new_width = 400;
            $new_height = 400;

            // create a new image with the new dimensions
            $new_image = imagecreatetruecolor($new_width, $new_height);

            // copy and resize the image data from the original image into the new image
            $sourceImage = imagecreatefromjpeg($original_image);
            imagecopyresampled($new_image, $sourceImage, 0, 0, 0, 0, $new_width, $new_height, $width, $height);

            // output the new image as a JPEG file
            imagejpeg($new_image, storage_path().'/app/'.$path);
            $user->profile_picture_path = $path;
        }
        $user->name = $request->input('fullname');
        $user->gender = $request->get('gender');

        $user->save();

        if ($profile_picture_is_null==null && !str_starts_with($user->profile_picture_path, 'public')) {
            if ($request->get('gender') == "male") {
                $profilepicture = "default-male";
            } else {
                $profilepicture = "default-female";
            }
            //$user->profile_picture_path = null;
        } else {
            $user->profile_picture_path = Storage::url($user->profile_picture_path);
            $profilepicture = "custom";
        }

        return response()->json([
            'success' => true,
            'profilepicture' => $profilepicture,
            'user'=> $user
        ], 200);
    }

import React, { useState, useCallback, useEffect, useRef } from "react";
import { withRouter } from "react-router-dom";
import { Formik, Field, Form, ErrorMessage, useField } from "formik";
import * as Yup from "yup";
import Axios from "axios";
import Cropper from "./../ImageCropper/ImageCropper";
import { getCroppedImg } from "./../ImageCropper/cropImage";
import { API_BASE_URL, ACCESS_TOKEN_NAME } from "../../constants/apiConstants";
import request from "../../utils/Request";
import TextInput from "./../common/TextInput";
import { AuthContext } from "../../contexts/auth.contexts";
import "./MyProfile.css";
import LOADING from "../../1487-loading.gif";
import DefaultMaleImage from "../../male-default-profile-picture.png";
import DefaultFemaleImage from "../../female-default-profile-picture.png";
import ImageCropper from "./../ImageCropper/ImageCropper";

function MyProfile(props) {
  const [data, setData] = useState(null);
  const { authState, authActions } = React.useContext(AuthContext);
  const [crop, setCrop] = useState({ x: 0, y: 0 });
  const [zoom, setZoom] = useState(1);
  const [croppedArea, setCroppedArea] = useState(null);
  const [croppedImageFile, setCroppedImageFile] = useState('a');
  const [imageSrc, setImageSrc] = useState(null);
  const profileRef = useRef();
  const [showCropper, setShowCropper] = useState(false);
  const [showMessage, setShowMessage] = useState(null);

  const onCropChange = useCallback((cropTemp) => {
    setCrop(cropTemp);
  }, []);

  const onFileChange = (event) => {
    if (event.target.files && event.target.files.length > 0) {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(event.target.files[0]);
      fileReader.onload = () => {
        setImageSrc(fileReader.result);
        setShowCropper(true);
      };
    }
  };

  const onCropComplete = useCallback((croppedArea) => {
    if(croppedArea){
      console.log(croppedArea);
      setCroppedArea(croppedArea);
    }
  }, []);

  const onZoomChange = useCallback((zoom) => {
    setZoom(zoom);
  }, []);

  useEffect(() => {
    request()
      .get(API_BASE_URL + "/api/users/userdata", {
        headers: {
          Authorization: "Bearer " + localStorage.getItem(ACCESS_TOKEN_NAME),
        },
      })
      .then((res) => {
        setData(res.data);

      });
  }, []);


  const SignupSchema = Yup.object().shape({
    name: Yup.string().required("Name is required"),
    gender: Yup.string().required("Gender is required"),
  });

  const handleSubmit = async (values, formProps) => {
    const formData = new FormData();
    if(croppedImageFile){
      formData.append('file', croppedImageFile );
    }
    formData.append('fullname', values.name);
    formData.append('gender', values.gender);
    formProps.setSubmitting(true);

    request()
      .post(API_BASE_URL + "/api/manage/myprofile", formData)
      .then((res) => {
        console.log(formProps);
        // setIsSubmitting(false);
        debugger
        formProps.setSubmitting(false)
        if(res.status === 200){
          if(res.data.success === true ){
            setData(res.data.user);
            setShowMessage(res.data.message)
            setTimeout(()=>{
              setShowMessage(null)
            },2500)
          }
        }
      }).catch((err)=>{
        console.log('aa');
        debugger
      });
  }

  function CustomTextInput(props) {
    const [field, meta] = useField(props);
    return (
      <div>
        <label htmlFor={props.name}>{props.label}</label>
        <input {...field} {...props} />
        {meta.touched && meta.error ? (
          <div className="error">{meta.error}</div>
        ) : null}
      </div>
    );
  }

  if (!data) {
    return <div className="loading-screen"><img src={LOADING} alt="Loading..." /></div>;
  }

  var defaultImage;

  if (data.gender=="male") {
    defaultImage = DefaultMaleImage;
  } else {
    defaultImage = DefaultFemaleImage;
  }

  return (
    <div className="mt-2">
        {showMessage && <div className="alert alert-success" >{showMessage}</div>}
        <h3 className="my-2">My Details</h3>
        {!imageSrc && <img className="max-height-profile-pic" src={data.profile_picture_path?(API_BASE_URL + data.profile_picture_path):defaultImage} />}
        <br />
        {imageSrc && (
            <ImageCropper
              imageSrc={imageSrc}
              crop={crop}
              zoom={zoom}
              aspect={1}
              showCropper={showCropper}
              setShowCropper={setShowCropper}
              onCropChange={onCropChange}
              onCropComplete={onCropComplete}
              onZoomChange={onZoomChange}
              setCroppedImageFile={setCroppedImageFile}
              cropShape="round"
            />
        )}
        {!imageSrc && <button className="btn btn-info " onClick={()=>{
          profileRef.current.click();
        }} > Upload Image </button>}
        {imageSrc && <button className="btn btn-danger " onClick={()=>{
          setImageSrc(null)
        }} > Remove Image </button>}
        {imageSrc && <button className="btn btn-info mx-2 " onClick={()=>{
          setShowCropper(true)
        }} > Crop Image </button>}
      <input className="btn btn-primary" style={{display: "none"}} type="file" ref={profileRef} onChange={onFileChange} />
      <br />
      <br />
      <div className="userForm">
        <Formik
          initialValues={{
            name: data.name,
            gender: data.gender,
          }}
          validationSchema={SignupSchema}
          onSubmit={(values, formProps) => {
            handleSubmit(values, formProps);
          }}
        >
          {({ submitForm, isSubmitting }) => (
            <Form className="row g-3">
              <div className="col-12">
                <CustomTextInput
                  label="Fullname"
                  name="name"
                  type="text"
                  className="form-control"
                />
              </div>
              <div className="col-12">
                <label for="gender" className="select-gender-label-myprofile">
                  Gender
                </label>
                <br />
                <Field className="select-gender-myprofile" as="select" name="gender">
                  <option value="male">Male</option>
                  <option value="female">Female</option>
                </Field>
              </div>
              <br />
              <div className="col-12">
                <button
                  type="button"
                  onClick={submitForm}
                  className="btn btn-primary"
                  disabled={isSubmitting}
                >
                  {isSubmitting === true ? "Saving..." : "Save"}
                </button>
              </div>
            </Form>
          )}
        </Formik>
      </div>
    </div>
  );
}

export default withRouter(MyProfile);

Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap css
Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://fonts.googleapis.com/icon?family=Material+Icons icon
Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css fontawesome.min.css
Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://code.jquery.com/jquery-3.2.1.slim.min.js jquery-3.2.1.slim.min.js
Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js popper.min.js
Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js bootstrap.min.js
Referrer Policy: Ignoring the less restricted referrer policy “no-referrer-when-downgrade” for the cross-site request: https://fonts.googleapis.com/css2?family=DM+Sans&display=swap css2
Error: Promised response from onMessage listener went out of scope 90 background.js:81:14398
true LoginForm.js:43:18
Object { user: {…}, token: "joku_token", isLogged: true, permissions: (14) […] }
auth.contexts.js:6:10
Object { resetForm: A(e), validateForm: Eh(), validateField: Eh(), setErrors: M(e), setFieldError: D(e, t), setFieldTouched: Eh(), setFieldValue: Eh(), setStatus: G(e), setSubmitting: W(e), setTouched: Eh(), … }
MyProfile.js:87:16
Object { resetForm: A(e), validateForm: Eh(), validateField: Eh(), setErrors: M(e), setFieldError: D(e, t), setFieldTouched: Eh(), setFieldValue: Eh(), setStatus: G(e), setSubmitting: W(e), setTouched: Eh(), … }
MyProfile.js:87:16
Object { x: 12.499999999999996, y: 0, width: 75.00000000000001, height: 100 }
MyProfile.js:47:14
Object { x: 0, y: 0 }
ImageCropper.js:37:12
Blob { size: 2186544, type: "image/jpeg" }
cropImage.js:65:14
Object { resetForm: A(e), validateForm: Eh(), validateField: Eh(), setErrors: M(e), setFieldError: D(e, t), setFieldTouched: Eh(), setFieldValue: Eh(), setStatus: G(e), setSubmitting: W(e), setTouched: Eh(), … }
MyProfile.js:87:16
aa MyProfile.js:101:16
Object { resetForm: A(e), validateForm: Eh(), validateField: Eh(), setErrors: M(e), setFieldError: D(e, t), setFieldTouched: Eh(), setFieldValue: Eh(), setStatus: G(e), setSubmitting: W(e), setTouched: Eh(), … }
MyProfile.js:87:16
aa MyProfile.js:101:16

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const fooContext = createContext();

function Component1() {
  const [bar, setBar] = useState("Foobar");

  return (
    <fooContext value={bar}>
      <h1>{`Hello ${bar}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  const bar = useContext(fooContext);

  return (
    <>
      <h1>Component 2</h1>
      <h2>{`Hello ${bar} again!`}</h2>
    </>
  );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);