Skip to content

Commit

Permalink
Merge pull request #594 from newfold-labs/enhance/error-when-uploadin…
Browse files Browse the repository at this point in the history 
…g-unsupported-files

Unsupported Mode for Site Logo
  • Loading branch information
@officiallygod
officiallygod authored Jul 24, 2024
2 parents 9a7b20e + 014002e commit 6354d9d
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 84 deletions.
188 changes: 104 additions & 84 deletions src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { THEME_LIGHT, THEME_DARK } from '../../../../../constants';
const ImageUploaderWithText = ( { image, imageSetter, onFailure } ) => {
const inputRef = useRef( null );
const { theme } = useContext( ThemeContext );
const [ isValidType, setIsValidType ] = useState( true );
const [ isUploading, setIsUploading ] = useState( false );
const [ onDragActive, setOnDragActive ] = useState( false );
const [ pngLogoBgTheme, setPngLogoBgTheme ] = useState( '' );
Expand Down Expand Up @@ -84,6 +85,7 @@ const ImageUploaderWithText = ( { image, imageSetter, onFailure } ) => {
};

const removeSelectedImage = () => {
setIsValidType( true );
setPngLogoBgTheme( '' );
imageSetter( {
id: 0,
Expand All @@ -98,6 +100,7 @@ const ImageUploaderWithText = ( { image, imageSetter, onFailure } ) => {

const imageChange = ( e ) => {
if ( e?.target?.files && e?.target?.files.length > 0 ) {
setIsValidType( true );
updateItem( e?.target?.files[ 0 ] );
}
};
Expand All @@ -110,7 +113,10 @@ const ImageUploaderWithText = ( { image, imageSetter, onFailure } ) => {
if (
e?.dataTransfer?.files[ 0 ]?.type.split( '/' )[ 0 ] === 'image'
) {
setIsValidType( true );
updateItem( e?.dataTransfer?.files[ 0 ] );
} else {
setIsValidType( false );
}
}
};
Expand All @@ -132,99 +138,113 @@ const ImageUploaderWithText = ( { image, imageSetter, onFailure } ) => {
);

return (
<div
className={ logoContainerClassnames }
onDrop={ ( e ) => handleDrop( e ) }
onDragOver={ ( e ) => handleDragOver( e ) }
onDragEnter={ ( e ) => handleDragEnter( e ) }
onDragLeave={ ( e ) => handleDragLeave( e ) }
>
{ isUploading ? (
<Spinner />
) : (
<>
{ ! isImageUploaded && (
<>
<div className="nfd-onboarding-image-uploader--with-text__heading">
<div
className={ classNames(
'nfd-onboarding-image-uploader--with-text__heading__icon',
theme === THEME_LIGHT
? 'nfd-onboarding-image-uploader--with-text__heading__icon--light'
: null
) }
></div>
<p className="nfd-onboarding-image-uploader--with-text__heading__text">
<span className="nfd-onboarding-image-uploader--with-text__heading__text__drop">
<>
<div
className={ logoContainerClassnames }
onDrop={ ( e ) => handleDrop( e ) }
onDragOver={ ( e ) => handleDragOver( e ) }
onDragEnter={ ( e ) => handleDragEnter( e ) }
onDragLeave={ ( e ) => handleDragLeave( e ) }
>
{ isUploading ? (
<Spinner />
) : (
<>
{ ! isImageUploaded && (
<>
<div className="nfd-onboarding-image-uploader--with-text__heading">
<div
className={ classNames(
'nfd-onboarding-image-uploader--with-text__heading__icon',
theme === THEME_LIGHT
? 'nfd-onboarding-image-uploader--with-text__heading__icon--light'
: null
) }
></div>
<p className="nfd-onboarding-image-uploader--with-text__heading__text">
<span className="nfd-onboarding-image-uploader--with-text__heading__text__drop">
{ __(
'Drop your logo here, or ',
'wp-module-onboarding'
) }
</span>
<button
onClick={ handleClick }
className="nfd-onboarding-image-uploader--with-text__heading__text__modal"
>
{ __(
'browse',
'wp-module-onboarding'
) }
</button>
<input
className="nfd-onboarding-image-uploader--with-text__heading__text__input"
accept="image/*"
type="file"
ref={ inputRef }
onChange={ imageChange }
/>
</p>
</div>
<div className="nfd-onboarding-image-uploader--with-text__subheading">
<p className="nfd-onboarding-image-uploader--with-text__subheading__text">
{ __(
'Drop your logo here, or ',
'supports .jpg, .png, .gif',
'wp-module-onboarding'
) }
</span>
<button
onClick={ handleClick }
className="nfd-onboarding-image-uploader--with-text__heading__text__modal"
>
{ __(
'browse',
</p>
</div>
</>
) }
{ isImageUploaded && (
<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview">
<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__wrapper">
<img
className="nfd-onboarding-image-uploader--with-text__site_logo__preview__image"
src={ image.url }
alt={ __(
'Site Logo Preview',
'wp-module-onboarding'
) }
</button>
<input
className="nfd-onboarding-image-uploader--with-text__heading__text__input"
accept="image/*"
type="file"
ref={ inputRef }
onChange={ imageChange }
/>
</p>
</div>
<div className="nfd-onboarding-image-uploader--with-text__subheading">
<p className="nfd-onboarding-image-uploader--with-text__subheading__text">
{ __(
'supports .jpg, .png, .gif',
'wp-module-onboarding'
) }
</p>
</div>
</>
) }
{ isImageUploaded && (
<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview">
<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__wrapper">
<img
className="nfd-onboarding-image-uploader--with-text__site_logo__preview__image"
src={ image.url }
alt={ __(
'Site Logo Preview',
'wp-module-onboarding'
) }
/>
</div>
<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details">
<p className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details__filename">
{ image.fileName }
</p>
<p className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details__filesize">
{ bytes( image.fileSize ) }
</p>
</div>
<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset">
<button
className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button"
onClick={ removeSelectedImage }
>
<Icon
className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button__icon"
icon={ closeSmall }
/>
</button>
</div>
<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details">
<p className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details__filename">
{ image.fileName }
</p>
<p className="nfd-onboarding-image-uploader--with-text__site_logo__preview__details__filesize">
{ bytes( image.fileSize ) }
</p>
</div>
<div className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset">
<button
className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button"
onClick={ removeSelectedImage }
>
<Icon
className="nfd-onboarding-image-uploader--with-text__site_logo__preview__reset__button__icon"
icon={ closeSmall }
/>
</button>
</div>
</div>
</div>
) }
</>
) }
</div>
{ ! isValidType && (
<div
className={
'nfd-onboarding-image-uploader--with-text--invalid'
}
>
{ __(
'This is not a valid Image Type',
'wp-module-onboarding'
) }
</>
</div>
) }
</div>
</>
);
};

Expand Down
4 changes: 4 additions & 0 deletions src/OnboardingSPA/components/ImageUploader/components/ImageUploaderWithText/stylesheet.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,5 +187,9 @@
}
}

&--invalid {
color: var(--nfd-onboarding-primary);
}

}
}

0 comments on commit 6354d9d

Please sign in to comment.